{"_id":"@material/mwc-radio","_rev":"733-cce7da51bab1119b228ad3fa5842b372","name":"@material/mwc-radio","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.1.0":{"name":"@material/mwc-radio","version":"0.1.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.1.0","@material/radio":"^0.35.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-radio@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-ly4+yuHYHU6Q3mTTGLg4MUN7Ais1JVivb/BR44GumuuHQRQLKNLmHqMh1+sK0PiWxMfc0TjEMfZBflQnVl6qrg==","shasum":"ef21cb686d8d9746ca14234b4896ccfde1f4d509","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.1.0.tgz","fileCount":5,"unpackedSize":15201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8OmNCRA9TVsSAnZWagAAM/MQAJWGmWGWo7t1jDaeXRbS\n5WeBgUv8vnNCb5z1eDZLuSZqashVQnq8+OXpwU2ds8UV/s9041y1FdRi3+SY\nHTEzPueZeLAgVghfuYzI80Y6qs1lj88/mKeW1K2nsOuf4k1HbEI2gYsCgv5Z\n2ySmhvq2Rxq+Mkg0T22DIgwnlMImGVCnGPF5ZSHj8fFdBCLuZNjO3Ivvvho+\nsnnm+yMe03qgncq71cSr8kXrcLA7205/rsdDwOQsLX9slZBR1PG5YMeytgSr\nzQ6eJH3sdYswy6UN1bYEGcu8HYx5wdsreDfhQJN+nz+6vswUlmOYb6Tu9thc\nheLRJUl8OH7h28aAJIk6I9fGAK/KwVhMyPTQGdi69rnGLLpSgbQcUX+MDYII\nk0qlfodX2OQqCkbQEvsKAlEysFC69xR2kgeYQ0h50wSY51NwL0cl5vzNsz93\nYVXbNuAccXwFvKAxTpQJZzhSB6BRVzJG74i6NQuZNNpAXX4ERuy4/5GW0dAs\nTjPGTmWj6w6Gs4wsHa6GpAfeGD7bJ2wi8YiDXipdBx6EYimTaIvnrKHUURHW\n3B2v7oXEGkT0e8zjCYfLM9s8VVIkd2oOrDhxq/lzpNcgSFbp0OnQ7t2Ke9v6\nzBMFVjQlhVIb0oH2stbdRMs0QtClKezbqFxJWdmMBZACOvkFORbGsE3rEJOc\ntrWU\r\n=U9JS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2eAXYBSzG3hagRWhSnBH7DG8m2w+AlP4cfRg/apK1HgIgcUiqY/FYCle13LJvosk6XWkrtoXA93cAuia8/Ri4Yog="}]},"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-radio_0.1.0_1525737868840_0.03714873979380995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.1":{"name":"@material/mwc-radio","version":"0.1.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.1.0","@material/radio":"^0.35.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-radio@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-2EMtaSTg2agPpcK6CMvHs8inQibCWtPPJoSEHtZsYXaq2W0FVHQmfvLm+CdzTJM9n99i87EQ63cAA2y4uJfwDA==","shasum":"0a3365f96609fe986f1f5e234b99738cf43dde3a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.1.1.tgz","fileCount":5,"unpackedSize":15208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82J9CRA9TVsSAnZWagAAdYQP+gOQujBKg6A/u4DO8dif\niyWeBeHEMeeoHsoh2Ad6dvqkb2fDt5g85jZ212Bi2Mc8B9+90B2969rjjJB/\nWvebWT0x+nmf41DcxgCmAPhaBZsiuuMZ+w9csnAyQ37dhyhIr+Ja1t1UKhbz\n2xwqYv8N9GqDJV8CebhKYB+Fh9KQagz3WlyALmCi6e5pcDTKtf0wjlvrpIYg\nA5OLsGxb2QDK8uOvhpG6jvQLo+QWccVxsjE+uKG3joo3anuY/IZ0XLA3fa25\n0x335PvuiPM1q3h8Yp4DZkJVpJjoQgxHwMVozif0dPBeP0ImVRoATdENXOxE\n85cl62yy/p3e1L8D5fs39KGjvHTTpXerjav/TB2C+PXsdf5YKBPlQaYkinSi\nsFLo2IrkvRvlXGMr/pdUNrLdIW0Fqdv1elM96Iv4SIH0Zi16iPgJpbxJRtVK\nH1e0tL0vyFFyS/BXg8E8IzY8YvBEpJe/3tVx1SP4pxJWdccrMYeYn2443LZO\n0gAdY/JGca57p9DTCYODZAL/31wI+achGqKTiVSBLVGC+AlWNryCCYsqTD47\nAvzc5EBjTnYO3WleYFV1UUMyR5fyHDtONqssh+MCYNRgf9fiItI5MYnKw7eq\n18dKg38YjDhRi8AhkepWNT41un7ne3sDW1mIR4pLEzeNyrL+5B3XNkeAh67F\npzUK\r\n=RjRb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtRETvnlRsw+igzECPZL4GWT0rocP9ud7CXhveMyTXTgIgSGGh4r0aF3vdFniGIUwNkvMulCd7jyjpY9uS26we8yg="}]},"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-radio_0.1.1_1525899900314_0.448265521889738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.2":{"name":"@material/mwc-radio","version":"0.1.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.1.2","@material/radio":"^0.35.0","@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-radio@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-vupUEYuKYbI4ahmvyWVQtf0U7I0wyJkNBECuSLxkzcrMn3rZmb1wJ4PSD0wuzdmkepEQ8SppUNpTLCIPDPDmvA==","shasum":"1d075dd93c22fd205780e0ad9062b4062997b519","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.1.2.tgz","fileCount":5,"unpackedSize":15208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIvFTCRA9TVsSAnZWagAA0NYQAKQG5B2HakEKNnXRkBhu\nShFZG1zAI3JJjPEOg2c9A6KTpbFHWNHMIrgHuOPdVS68/vm2KlFrOZ5QcVQf\noeYD6QFYENBfkdhbGGE1YUFEWub0WNLtzIs8VcOLxoVy2fCBx3eUYlT5vtV1\nyGPcYHVEg/dkCSssoD2yhYUNO8R1tiFCg9GEtprobjy0nmdKgT4aVEzsl6rd\nINFpLBVn/alqK1QDexwCX/l2boJR9lUMktn5/SX6dYGxFgk7kr/LalpcvqA2\nYKKZ1D29bddI7fZW0xDSvXhwWOPNLjz0Z63Her9AJSE94mb3SL4XuHXB0Gfe\nlKe9VKd+qr/D9wBU+Djkpnfw1qxGPImbt8UABDkx4viq368R5z94jqqMwNyn\naAVn6gCO4jNv6Zt7tNjPbov1akxzWS5pwEu/ma1A9ACmzfw0DUw0EiOKgJef\nYz3emCJwju0NMJGnwiBKy5Bdwj+UrmO1tCBQvW9RVkaCwhKjesHdVeYbY39c\nMH/2dDWb20wz5E93qm2/RVfLu+o3YU0Vj7kbnbrKyoCshl1Rb0kdTHtpbgna\nzSe1wDGxvfQkJEWEH1QhoA9RFAL1COz5IUad5x+jV58Rq9OFCdGtP1jDR2Lm\nRrSKa0sR0sPj1myNPmcJlLBJbGk5/9h36LaudNBadGtIEY/vtL0iNBmJFqNG\nvs5V\r\n=s1Yu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEimEIXepHaG7zDTXE9bE22G8dBtxScWjY4VWeL9Qb3LAiEAgt3aedZou3guNtTMsSTIz4AIgiVAFYhkdO70rp5OUnE="}]},"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-radio_0.1.2_1529016658692_0.3028931590615267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.0":{"name":"@material/mwc-radio","version":"0.2.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.2.0","@material/radio":"^0.35.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-radio@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-GpKRHHW66Pw5qxGwf5mfiaWNybSJKvetvB5OyY2XCIQxg4UctW7eTQLXn5TspFuuVDH4E6qnUXUSP3Kq+1l8Jg==","shasum":"7a8ca9305c25411c67881d34d498fa1b58f7c3c1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.2.0.tgz","fileCount":5,"unpackedSize":15333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmwKQCRA9TVsSAnZWagAAu2YQAIucAUpoTylPSfRlDtF9\nY7Jw6RxrZTTGBQfO0nb7uVax/NQw9sBPi76lJKUC/4mIuZDNSfT2T4rRfjW7\niHy+8xjJP+iJFLwrbvf6qAeeymj3WELwqOI7lLrqZXW/zKadhLJTooktVqqW\nN7B8oqUjOBcd0hgGtqzvKclgghgLoncAUBlY8To+ve+5F78Z+8ks6LDQURWY\nrxt4JP9FagN9Ei8Ir6pLLiNMrHo/SNTFzu0I8mPWaYWkHRL0nVDHDHnpl59g\n91e2NoSl90FJcIWr3fsqZnTyzzu36p7nCpnais1SpX3gXRo2TikCl4G0QMbB\nIgqaOi1plP6BMTGxn6DDAtTNSca4VHPZl2gn4jeamWEf8Sd07txBojwmsR9/\n8LxWQKSLrf4SD8LJO76P5+65fuxZGGmoe+5tADCUFN9HVLpaBxiJaTWbjtJ7\n6KHHhb8mS/jJkfFLRBNU+3PlXbU3n7+92NzHeh6TCFHSW0o25y51vSi0B/ZK\nx3+V9R4hqmIq4yOJwlZ+AHO8egVf/0ZjA6V7/bHh/rF+C/6RfSni0jurv2TI\nai+dIFYYgQrLTAqfPWzhzvJ2iP7PiYc9A85wswlRFUwruWzP8l8JBsCE5Goi\nTz+nm+I4gKbFC4rb3zNG9HKKpU9JTYCNsVqkBrJqv8QHLaiUVjrUXdoeXs0m\nZPiy\r\n=AFBM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKUf0mm1U3lNWYmLHtD5N+IRCfbvRyleSlqpcl/pbYSQIgeKlfXo6fMIA9rYRvRn5nnPMjqGGZMhX6T4bdqcyvqDs="}]},"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-radio_0.2.0_1536885390869_0.35449083091867406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.1":{"name":"@material/mwc-radio","version":"0.2.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.2.1","@material/radio":"^0.35.0","@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-radio@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-fevxIe2AKC3qSuF/pah89Xt6mVU1eYbv3BjR9OgTgQPSL9C0KEXjIeg2r+Z3HiyIrusmzPshLUvkPVHUQtT2Zw==","shasum":"445abd10984293f00a7741e3f8428e633042615d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.2.1.tgz","fileCount":5,"unpackedSize":15335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpZQmCRA9TVsSAnZWagAASSMP/2lg8dnA9ptckGM0uAfS\n6OybZHj1MtgcbeuoDduYRNc/N8djCXcIsCHbf3WWYsXd7xEXMUraxezCEESl\nauinH0AaWe/neF949uEoC3LgKK1Tea2eNjs1rv7h+XExxGnbhVqnrGwEo3mO\n1NUsTKJRvWv0DSBVzeWWRTZ7G9OLcPN29UFKhGgfTpdSUbgqqfUrXi/fAaYv\nq7o6Byi3Mm2e+1s6QOm3Ryl/zZ5u9L1c1kpcB2gOrvHduwI3afhkbgvd86cf\nIbt6S8B63UoPRUqKmE1vyAOBYZ1HVFhc/YuTYH2pmsstl2Xq6dPCkxVqYeKb\niIVDGdjwJJ0tM3aJGY2Dc/heL72krncyZe1spHVaihb+c3cp8FmOz2Jnw05Z\nAmmf8zZXhTv8mYmc7XSpTTVOGMN9PypV1AySBMQbOgukZ59b4/r7AkjgHxgP\nGg1vJPbCJIGxDpyH3Sj3Mp2Mt/MzhFTXuuT7WxycoyXL0T58/byUN/kHW6xn\nh7OelAmc882BpKdd6sOb0efe92VyekU/AxFSwDYzxTrgxgj8V1267R6gxMgI\nkVbRMyPfN7/OZg40iX23QosDcwOGuaFuDrLbYyzhwOZhzj5VDgYMRVZybMcy\nlUo1Y/ks+2DQN+zoIPUoMXUdcrhfwwPuVwhgn1xRRYLYLw49D3kNu67w117p\nGDSd\r\n=+TlO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuZ34qxTCvIlsce19o4EokxAN48Itn7enopzxnycyZKAIhAN1bm8uHWI0YhGvnnfQHkRoDHOdtlqCchVPy9z0ZG+c6"}]},"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-radio_0.2.1_1537578021349_0.5092015654542514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.0":{"name":"@material/mwc-radio","version":"0.3.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.0","@material/mwc-ripple":"^0.3.0","@material/radio":"^0.40.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-radio@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-3vyOhUzQkd0ejMzMvbDeCERiZtqsPSg/BIq/SwagMPtmGJ7RO2Ya3Nnl7cNcuRsvlslC0ivF7NPQcChXQjHa0Q==","shasum":"6fb446e562c7ac3b1bfb13a25ead1573d1b7bc00","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.3.0.tgz","fileCount":16,"unpackedSize":63912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtqGHCRA9TVsSAnZWagAAVpoP/1lhKTMj+escaU4mf4Lg\nDOpG/gllHQT+jPa8YMElA9BXybqjz+PPpeFNlbU737EPiikJznvZDDWCPypQ\nUgHyYd6ZzUmOp3Hr8OxiTl6fLSpehrtqBpSXQXIgFNB26ybi3Wzc9sP420Qq\nJRtiacfga8+5gCvXtltDZd4yivQlOarMugcTF1HPY9OhHZvphbWsAySVmJot\nIC9vhk4VmLfSgqDeigACeA40f+H401aigTYRdZzjGc+FWFAo4VlSNN8L3hPj\nk2RrMdZ0YHweJLu51cekcXE0oZSQJoGCypTQ8ZxEAymLGsdYXJkort/ShKav\n4m/J973qyVgJi8heJYCjNaB3sI3Jurma6DNnEVcVAEmRF+ToXewlJoG1x10y\n2ApWBkQJ9P3FKWgASopHLSW02pZwBoNgrbo/czrwjvGsbAfh/4EBgEePCMNk\nDBKbVZsCQacKq5m0nbW3LQ85Oj8n/xKA2HmmAyClpTHuDpVNJUtc8VeurWQq\nkr6ZhL3LvMAw0vBfXlYBwVp0yRz9ovr0SvbErjsmlHCODyz3wTM7QVVQIzl/\nnLPFOyD7PXevvU4RSnC13mm6k9plgVsA9OsxYZ4Q5qxEEHOZ7UAGwAf9XlEt\nw7TpGF23d63rHPevYBLL6g6DhFchFAyHC/SXePFMWME/c+LQ0bKRUqQw8eyn\nltIO\r\n=+MQk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHi8nu87vV/34d4SfGID/BkJx8SCoekj/agUtNlYrLmeAiEAmKJLgMw/oCXbnvQMYK97H4EMpSxNMbNd+5JUlgFyeiQ="}]},"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-radio_0.3.0_1538695558362_0.04945153585080697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.1":{"name":"@material/mwc-radio","version":"0.3.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.1","@material/mwc-ripple":"^0.3.1","@material/radio":"^0.40.0","@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-radio@0.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-EL6h2Io/NFlE7o/OX5vuq3drWt2V4+fLbKQlEdPzqJS3F0Bw6IGOB2GJ1S0ImTlYeAABc7dupSUfptO+z1l1vA==","shasum":"a557a97db4c4588b7a6fad77e2e077601dd6d440","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.3.1.tgz","fileCount":16,"unpackedSize":63974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu64OCRA9TVsSAnZWagAATmUP/1G1fT1wPhV/DrlDVp6l\nWU5mNyqtgW91kodu3AEXdd7P3JL/J/JTWWUduJDWyA9busRzUa7ZkOWNfa1h\nBv10SQBQWZF6yWgdSyXTm11mNqWkb25/2lPQtiSekx1QHmGQi6OvVGHbwG5H\ngl652Q+dXFDhlcQyeQ8FsieWuhKcEosD2lySfAMWiPmddDLzg333jzs6oOKu\ng7QLD0C3TZirPUEpQRjrz7tXlyKhQfI5oJfToN6K+6Z0lL3pcT9Cp9lNNZQk\npC6N8svNg6EnYyjfTmIgnen3VwAxjorvlzJz0OsyFHnUyiXliOnOsmQ1aT8p\nPNWVBjFd73ay1mV5kpeO/aKRJADgtJDZ3MIcWsQoUqOVGMCfZWq12UZ2TG0X\nQHnG2I6jLB2cer76M+8CuEo0+Y5gntVvEclPQEW4f9dV1qzzrXXa/7vxuzaz\nyTsNfHnfoPxVCyDlXox3pMlGhiIm6AyE0DSouBHJtdjG/quby/mOWR4u9PUM\nId8c4QgX4yTG8y6LcFvpYwJp8oCmBazM4exwL0oy4Pb+aTrb5i2zKjuS8Pkb\nu3QGhcrDoI2hbXvgP/5y1wLqubN7uLCvCR68OZ9gD/U9plo5pA9dd9Kk8rfw\nlzr+K3naGRUFof3KpiMnhF339YKgTiMNPZrF0f6REQGPU07tDRCpHfLIuUoE\nz6V0\r\n=pJPJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHn+bQo6NFZ7JKG0g0z8SC0dQWHkewITtUCKcF3JgkcQIhAPy19tOQeJOwkFhWYt31tr5HkCLHjIGABFVOE88Ms/QO"}]},"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-radio_0.3.1_1539026445273_0.8915852188882594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.2":{"name":"@material/mwc-radio","version":"0.3.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.2","@material/mwc-ripple":"^0.3.2","@material/radio":"^0.40.0","@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-radio@0.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-2ErODSp3oH/J4IFUauWFe/tJ4DO25sthZCoCdB1h9rbXkzEKfV562+2vaCJeGa89NfyEd7h45F0/5ulQwujTRg==","shasum":"eeb1bf956569f8fdab27a919f618a637b284afe6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.3.2.tgz","fileCount":16,"unpackedSize":63861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb73eJCRA9TVsSAnZWagAACFIQAJxvPpINnT2YU9rgXOid\nEAVrmfEjTcHvn2fCKR+sw8xiEfhTqwVp3cxNHM+cefJd0jOfx107oKz7mIiD\nW3KxpKBTSVao1T1lSUM/H9oEBR3mUtpfnriz39un00pGqNipTAb2VjfdH8KU\nqbym/YzDBPHaetaFcCbXuqlOLEkY/eLVwSb757N+r+FdJi74rPCDpTjM5Gv/\nnMvLNQbc2kPONNvvOTzDiQJOB/7ME/rXMJU8WTaTWw6aH83U499tXg0BGT7I\n5gLYkD0c2UbI9yFXcnV2wFAKOvIvcwMUGbaMLElAsKo2+Me38L5YojwOZitF\njs6fSpC2NR6sM2eLYKL0ehf2SCMv0Aifb0yXpsg3D2UFpAc9Gu8BkOOKQ7BU\ncv2ACwwFIeBvcrl8tJUnnyjeBaAT/JVxVjIdKWMEO9b9wQ5PtAMEbW3TGMcr\ntt5coqTkcA9ACYjLnp0tBjhknwTDMTErpcAS+Gva26BfRzqUWupzHiFS97a5\nlTyrhDByJFFu8ujuPYnx00Agb5tmbfXyGA4IOnqTEsTehidvOg07STwDvWB2\nYEO0Pd8Lo4+IYavphgcecQB6kC4eE0KbyPYW12VfhBH3f6/E3BFANGAZjdQU\nsy97Mh4BnMUcyxWNl6pEqWBMgduRwHm0viwSMkOAenwC3ogyoY+XqLCtep5h\nvC3+\r\n=3exx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl5MJ+q+TSSjhCLo4iuLbnkR6M4kYNXz83duPYzcvdtQIgCI31J+q6rTWp+gIjF55iPwXSDljaBsd1kTH9YqlZUVQ="}]},"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-radio_0.3.2_1542420360612_0.0469814264676518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.3":{"name":"@material/mwc-radio","version":"0.3.3","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.3","@material/mwc-ripple":"^0.3.3","@material/radio":"^0.40.0","@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-radio@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-40HFiaC+gJGtoGbu/eHbsu5nIhvJFcCVdjxZfbiXDsapsMPXDFpB7GXavEajN9CCkBpZJ4iGOPbI1eg5QOG0VA==","shasum":"029dfec121f18e341b350ef7ea34f7b4b73d1b22","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.3.3.tgz","fileCount":16,"unpackedSize":63861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBdEgCRA9TVsSAnZWagAAuHEP/jhkH+Xb9jX+Q8b9le3U\nCOm8A78wq9ygfYY8KcjNT/I/ruSC3qUy9oh4f5LGnnphcG/gNDPBHC3jNBxy\n1Dcw+6l4F/WKOy42bByMRUWlTDB0NcCSWPtgPVNC/H9byOK9f2lFZ/eRRUW1\nZDpDmU4+uXUq8lct98leIVGHy5oaWpyDtJiQZWIB7BoRnth3yh1z0SKm+pw3\nUNF/RHcAUy0k/V1dTTAUFHnKAAmIswYTo05KcQ/vmo7B7g9y8GUZIYLDVevk\ndrR95kX/fSIdoqZKpwB4n38TrfxCLEertZq3sr9QWqNaIyeUdAvfp9Ldm38i\n6cNWnhW3dz1FW8k7/hOYKFR4W/2aUPjofSgTBX1qB5BjGRfjbYttAFLtqUdT\nQ/s3CBy+NAaWIyHS/wTlayxQ2fxQnEjdfRbs8Smx4AS6LNoc4OjDzG18ZkeS\nLhPTP2DKrmRK0fwFmTN1DMY+a1yr25HKZgn8rrQI/V8twLGUXMcSlGuOvS54\nm1mX+MKrG7kU+2jei0ORjfKmNEq7CYMoZbHxJYSMqij3ifuSv45IIcgLnWj/\nE+CYKHTYYQbUJbtTZVs9Var7vOhB1Xj0pkNXNBj34XXr1BfqXjL/uHCBgfXO\nTpKsZqyfCspnKTAY+l1MEHOLu/5+13d15je+ZgRx0YUXtLtiT25M37iroPev\nBuGE\r\n=Xriv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmBmiE1x3lJy5IBIVIEaivUwInqFjomM/eRp4Fx3WD8AiEAy9G8okBxs7KbeSenzBZ7/Kjt8ASA+UZicmyKikptSSY="}]},"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-radio_0.3.3_1543885087543_0.22763034136952087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.4":{"name":"@material/mwc-radio","version":"0.3.4","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.4","@material/mwc-ripple":"^0.3.4","@material/radio":"^0.40.0","@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-radio@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-IR1ql2sv7N7Ut0/1ph0yjh6B38tpCFxA8VJv1ctAHChi0elOGNRG8fRdxtzM0inaOw1XJdiDOC2PahdvTQkaDw==","shasum":"1afa563d226c38bc684086d5cebb63b9f19f5e83","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.3.4.tgz","fileCount":16,"unpackedSize":63841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsN4CRA9TVsSAnZWagAAHuQQAIYQd1cn71A4BCa+o+0i\nzwKPcgmNVSm9nIjwCsdZWnr3xoJGPwji5dmhUKAh1hzuw8GIE/Cao8/67ksl\nyidaQSnFX2zT6gOfvS3deRZDdAPTDTFM0M/nSFvVkbCuhvu7caabduAQZbIg\nHQqgFP8PISI7nMCw49dJ7dwBuAU0szpBVzNVij9Ld81aLZDKu83zjXj7h1io\nFeRxDVI74XqD7b35eEdOS3jThHKWMw1q53akaa0+bbuYAG/Tb/gQQXGJTVS/\nxM1558gpa6D9cAGQ260VbR9a7tmLMCyrFHv8m/p4hnGb7tDuqD7WR/Fi7wRZ\nnWJq6Dm4eKF4VcnNHuldEyPfFGC7QhpOjtubIVHaJAbtiRdCEFsRNCv/3ugc\nQNHFglPOivdsgaf5m7S2h8DtSZJ1ezR3svhKDvgTkfqEKv9AbLyxvdpQ2Kf3\nbFOhWPIPqj5CO4+7cL5i+z9RuMMwxaRiZxWgHSj5d8f0npc+q3eyKnVPyuez\nggl/EDdP5Uz55IYfB5BBSvsOyXc588OxbNcvshv9NkHUjmP2jtuk+Qol2dcS\nGFf6QM4nvGCQkQNSQihLwAl2ZxmDXTGGDRVgsCNrVOHnd1InP0gL31ItoJ10\nkOxqOMFDBLADDUXpy6m8RDc6Oxk2zw4LAAmQjHaIlPkxQvA013090sTCPQqI\nUCt6\r\n=A9i4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjkmzu/IvLtEyNDfVLKzjNmfH9R81gkCjIoJBDglOEiAiEA6PFhEVUDr62PQJu1dEWlR+2MqlnsM8fkPVNgc0Mewuk="}]},"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-radio_0.3.4_1544733559662_0.9973034763641693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.5":{"name":"@material/mwc-radio","version":"0.3.5","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.5","@material/mwc-ripple":"^0.3.5","@material/radio":"^0.40.0","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-radio@0.3.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-SW/dNW/LObtW4gHnrzKGq944rd4nIlgd074l29EPHH4arvJmJ3pSGDuLhR3ckDbXniAXcCY0dASsQ1S8y6TmSQ==","shasum":"39b9c720012bb5a7f0243fc0d0b89bf1eae76045","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.3.5.tgz","fileCount":16,"unpackedSize":63811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORXPCRA9TVsSAnZWagAA8foP/ifAwdKej0PtDdLWyPNX\n3ESJBXgAQkBqYoyznhkZJrKKRTWw66W3tMBxo+D8Gfi6oRvphzWj1EBu2zbY\nZub0t74g1hfdu3Rfvr0mQ4JboM3VYT6GItWmCtPuPwtgtGr8idNtsNLSmxbF\n3vORjijjN5fiKv7YY25zAOUyZUuZKlsbh3P69RnI1bae40citoAmIPjeCFev\nhj51M33Mj76WlCAE02tKF3jlWAubYtVcoJDR5GrJtfYeA891uEwj1We2dSDC\nPCBzZMTCHgJOlKAY/vzDLT4cU1DL44yiVhTCU30+GRWHdpek13Ca0wrmpv8H\njNVj7kaKjNWCKed4uplhuRCvkzqA9YoLex0sgkqe6iUBI9m/1wCGRQWyaaXP\nDM8l+1N+0RpVp0J1c7vf7BcC6TFO6YAtk7cvS7NR2w3s0/XXwtVbezI0EhMO\nqp/J9mffU9m/thFs9r4KtkYWvKAjioxApAnAvO4DKEb3gGdeZg/eIHprwmOY\npxhyQNr96lyQTQw8bbLJj5kCPOUKO4jfBwI0lS9psPUyufKm5suVG520+SJK\nRnNlJVaG/ImCxpb4PtRIE/hH7lO7t2gorYX01UCgEkkJft9l8GUJTcajKByC\nSSblrJ3BxQROd8dFvcrZderX+yMo72spkKetmwXzUWrUsx9yzZyrz0JwYxvd\n8ZZa\r\n=iEPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoVBWUsssp47S+1Zy8Wlu8zZtMuEIRud6dACZ6z9i0AQIgJ3f+LiShocYPMU0J6CjrYZPSPEfmC3s/VueVsLiP01Q="}]},"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-radio_0.3.5_1547245006691_0.596988125555415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.6":{"name":"@material/mwc-radio","version":"0.3.6","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.6","@material/mwc-ripple":"^0.3.6","@material/radio":"^0.40.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-radio@0.3.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-oA74ssehXvA+AqcBjSRaIqN8NuxzHN4EUztMqOpUKaS8OBokburBeAJd3bLqTq1gJThg06MJUvh+la1CyW4cmw==","shasum":"d237947425f79aa04dd2c2636b4e8122a72b819b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.3.6.tgz","fileCount":16,"unpackedSize":63577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWe+eCRA9TVsSAnZWagAADv8QAJmHWofKCsItUs0zUF2J\nssbMNnpUjDjQ5TverWwNWUwJPLWHT+W92OfpTs1QSsWFg1Pttfk/zO+Jh1zw\nQW5RT0BYrNu0RQEMOvCGGXuwlHZkgwesntP4EmwMV0J2fnO+LPOAu7nfhVEP\ne4XcWzdjkM8whiQEWDXqhDxSJg7cv09LBE3SLTMBwxMyVOVkl0TN1aBIzfIZ\n7/0OKoaaGhc9iNQzf/9wCiL/ZzVqAdGWG17ScWRMhCl/JqcRbE9fVxaHEjv9\nhSPJ3M6gObJigzmGPOOX1ddFXh9X16YxOZljdDN+6qA5gsuBDw1UHlchHyci\nOkgJMeYkPfp1v39ct8AziTd8hg+1y+0qtPKJ1ei3s+Ej8Uye074ez223I18m\nclE5oAMwy4Enp+CjrMmhNlfWmderRxQ/pRRfpR645c+Us9Z9FtO7TpBgOBSR\ni0mU7dsXj8Ws9up2vWIJmCcwNNHxDPAeH/wCXEEIYEh/V4z4fPI/Gyjtw5K/\nLNHrCORdIlkKUHCdfhfgt8Dn/yJjSOQhXFi9q5k6MDa77sGnREnd2QeqZ9Qz\n349XWKhBmIngJ4PEVZdw/5bVOGxI6/Rc+scsobyRpQtvLcNYkg0hkeIIseeG\nw7yrckuckLMgnIP8uH3zw5IjaX13sS4xAEqLb0HokqoZQ8kTrqU9ImDTNa5K\nh8MY\r\n=M1zQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3BJM1MGr4198e4gi5gmw4LZChcKnimPCvoFgUWiqXxAIhAOLxPQfe/VBwD7dSh5Ih8PlwAnYvJEeqb0F4r/H+muQz"}]},"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-radio_0.3.6_1549397917930_0.005516143646987048"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.4.0":{"name":"@material/mwc-radio","version":"0.4.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.3.6","@material/mwc-ripple":"^0.4.0","@material/radio":"^0.44.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-radio@0.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-vL4IS5mosxxkPIYUBMbcbjEOetGD1lfgGBKI470Hp9XFdlaHVkGjc3+Tf66H/tZph9kvTldxVdlZhgd47rsUdA==","shasum":"3f3aca5d7c69e5bec6f0dda890811e7e6923c378","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.4.0.tgz","fileCount":16,"unpackedSize":63233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvbXCRA9TVsSAnZWagAANtAQAJLybmd8yFqyMnYARaYh\n4irzvvDJYh4x35H6bNxiwiVW/LtlA4uz4JLSVhXBhWBd83q0uVfRANAbYabL\nJCiWh4rgLVrSlSmfo66Egv/+8XrjIPn+dw/crWNn75wq1J229QTrg+B/8Pa+\njdgokmLEIlLRzJKblHHll6EyS8c31mUTIsU9Pmw0Y7tX6xWfLVRLVLc+378o\n6duCIIQPtFc1gc9ujaXsum+5eEQzxCVco9TcsStaNfivu2L6Y8Jyyxl/78F5\nY2iY75tYfb3Nxj7DpkTtvvr6Z3TwU4SXdiqgsX14aN2Vgz332Og4EV4WcYHR\nI1lCV8Kjfgf1ztkMtuUPVbNVeBKx125DvFwmv6FMgRP+mEefpdZKk2cjy0K9\nqZA5FiMlfJaQ3J6jILm8PfJ/X8G3QxOmcNyj84vzUqjnZyiRtekkGkbc4e4x\nHL7o+T1huH5O2LgJAceqp2ILDusQXYS30bz6CQLVSUq8Ho86TGfTDFG9a3Yg\ntx4+yoIvIwzYTsVIyX31eP6IbzTPwo4KDT1bFhF5XSKgdoEoBWzi4m4b4IYA\nub9ax+KJBFDqr/aI2BqG/j9lMmQnywltpLXoZekYQSa2TuoQmzgWYIiLgjSH\nrkehaEBg6t2LgtUAcvpiWeDzbTshOGHcoj597taUzQfCvE83i7xai2URMnwY\nyohE\r\n=t6zk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDciwXdE35z16UAxxwp9Gn9RnBGVBGR/Kr54XnE7rxuMwIgVO1ODC+d7y8YVjYmfhb1NeCOtII8ux//idwa9xDeEVA="}]},"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-radio_0.4.0_1552348887162_0.12445845443998715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.5.0":{"name":"@material/mwc-radio","version":"0.5.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-radio.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/mwc-base":"^0.5.0","@material/mwc-ripple":"^0.5.0","@material/radio":"^1.0.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-radio@0.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-PcZlAVAMbCWM1Xp9PZRV7DACxmhq5o8OTY4EO/9lK8PbLoPFSGuwAtYG1TOY3nDAZ2AX2WmxP41K55EPEoq3Kg==","shasum":"4bdb525887786c81986826d3fa9a25ee1dbd41f2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.5.0.tgz","fileCount":16,"unpackedSize":62898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmqn7CRA9TVsSAnZWagAAo2QP+gPI826HvaXHl1ql9Gam\nYrYyrv5bDry8MedfHCEdTIyOO+/v5OWqLi02zGXlJX8ZMQQwZuwq7eCKz1sm\nnepwSi8DBgvF6FRZGdweaO+byeoiUK65x9bt+xO530NYDfaOzM/SqUJMIAKx\nEUwE5ms7aUfetjFW3wCLdhWxngysuVWp8L1MmpVxxchpr+Z60gUpGCXD9glT\ndYdc6bsgjATZ0ze6HWW31fcq1xwEdfw9EdN9M3r0kQDVFI9jqWRckd0ZkXLe\nZxqntv579X6qbVNMxTo9rNpSFn6y0YJ3/ccyT38PBj4fB/9xBkdFhMJX8R27\nQy/faM70BetMSMEkxamf9VQppDgO+sP4E3oXDm9XhQmsueNuDnSvDXuoHiey\nuqN/SIHNnkRbKOPX3B7MYyFln9o7qR+eW+/UxTA7rSfHvV7FiKc5tiyXjfXy\np/pPDHvhjGV9whWsGQgapwlX95N0shI4mXUfbsueL592OPHVM8/tvfTA1d/j\nJNnC+wAfQYXq5NoC6WxtbDTZLzOU8bf9T1XLapSnG0yIMQPXjop+BnsGdvrJ\nBDJSZPPCpBvvGuUadf8+lHqQy0gV4n05GT+UkefcYbl68H+EGEBkVeIeNR1T\nHum7sIA3UYMqafeZLN+/vGmuHERXQg4CTMGAOElrI1oRzLP1LR8tdmTBKTjQ\ncUrZ\r\n=+cCq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTahaSaHAvTVI2lTR/yfJFmoSNtUEpi6FtlJY3XFmxNAiAPihcqSsR3CvzST7GSH1WJyUFGBPrAoGBSmbmBfosZ7w=="}]},"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-radio_0.5.0_1553639931372_0.6224881733815935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.6.0":{"name":"@material/mwc-radio","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-radio.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/mwc-base":"^0.6.0","@material/mwc-ripple":"^0.6.0","@material/radio":"^1.0.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-radio@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-/zxhUC8qMf+TKtZ3Y22rIwQ0qNsdmAI6BYxxkcyBJ83za2AbF1lX4iPGqAG+0JTnUKu/cGeVCbFLuBtKqWetyA==","shasum":"31fd06ca47824db658474107d360652e9fc8d2b4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.6.0.tgz","fileCount":19,"unpackedSize":301364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAqCRA9TVsSAnZWagAAH18P/2UYogahLtpXF9vsQRkR\nGJq2TRDxctjC+iGmR7fVG3ELvjQUW7C6WYA9Dpg+5ONQRtufhhmWogTQO54n\nxZ1fpBGmGmVNLr63v7ZQ7ONTbwIO3ViatGJauRDfZmsbKMKxJQ2CDE4/U1xv\nry6ZBLw2c7Z9uNcvAWtIZOVt9ajFnpVEYZXnylkb4pRAI6v13yYI4wjGW+sk\nLeYCqQ2sp79vLx35ilNuYkK7WMklfT7vb5VeKeEjsot/4OygADcnVfiUFGOE\nupklq/oK6IaEE2L69xyIHtfbvrRJKtY4Qawa1nHPngpP/rGULUr3g20ISEg6\nVwmGgBmoWGw57oFH3LvWqjGatJhHRlQz3KJhG+XFbtN5r2L7K+36FwmaSWVw\nWTlg1e87YloXAGdilpPtZuTY5Qv+bD0TMOcs7e8tw7Xstpz0IynIpOPJHqYO\nxNSEBF0pKmy7kd8L5QAouy86g+OHk1i6av6nEoOIM2YJH68oREyAZMJBKj/S\nr1jONngtxsAelEEWBhLdQN00+umMH1QxzUlZt853PsQqU4ZB/GZuzF8gLdo3\n43RBUKuUWZg4S6ZtJQleJ+o+whXG/3XhnqhYkX2gTwzb10K0qhMZIIrVgzL+\nGhP1IpryhzE7L0jsFHBWSyNa9N3l7BwNkRMp4vRnBByvPWPXlyuUhzYCOW9h\nNeE1\r\n=4VIZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYjB//jdFDx+d0IOiU0mXO7HEVWefJxkULn0JfvIqflAIgMxNthyXnIYTcCBwbKaaEUphPwQE2zqy49KnXJgesToY="}]},"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-radio_0.6.0_1559773226002_0.3127540483095068"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-radio","version":"0.7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-ripple":"^0.7.0","@material/radio":"^3.0.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-radio@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-IuHDFwOZxNfqzvhEzova2GXAd7HdrjSgwjd9kR1FVB+5qhqVUzeMua3qPBEGUmm6QmNAQIRakQpOG+6rTuw3QQ==","shasum":"eb78d9a157aa651172954ddb0116bf743b85db47","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.7.0.tgz","fileCount":16,"unpackedSize":82297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9kCRA9TVsSAnZWagAAQmIP/iyouCmPrIj0WtDGboqy\nuMcNQwTCudDKl84VA4DM+Ha23EXvw5wloCfetxsqYHhD/zWCIyusZgr/8XMz\nt+a11ziULuCyR8PKXjEEiPKEJhSp5FiMlr7v6z0kgBJuRjrpmTHrhygkxG0j\nHbJrygptrlU0Groit3yQuUUS8L6QY+jyfJm7c1s4zf6IHO/nRqqcJAKt5xh3\n9yGYoF2CsCPr1piJNZcLl0FJ5KVj6ZN46+IkqyTAaWnOJd4x5CdRiyCTuf2l\npWJKgvvukJMZsm+5gCxwbyrt/YwiizsAOe2c89f8gnQ0t5EjjE7uUbV6g1SS\n7EuNOdXZgLJRVeCEQ5dyGAyLyi0MAIzq7eZ26mhbYS5b5BZd0DomqzT31w+H\nMwbz+wUGLWtjqrsYTFQ4VhJHSYoTv+nwpXC/lgSw86QibXkupyqjSncG4MlU\nJDDPx+TNT7+u9uy17ZnQCX4HjpI/efH6FqeVapTfQmn7lpK2HePWssxfZ7cd\nS8PS0rfPrT4/xPxVfjC224Lv+LI8Q4HRTIanWN8Z7Px/Fl+fSa37DIcA4QfK\nV8inZ5XnvzOrT1h7R8cSAWcKTVBgVaCTjer3KrbGzsbdCB5vzm7CDUVUIAi/\ns8wPEzzCfLT3mEqJuHSIk8JJg4nFqM7X0MwoT9qoJHzWNXJWShsM+qJx8MBK\nporF\r\n=bek8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCng8u8/QXKvDKHnUlobsSAyDQmtxAEwIx3p67H+RSfOwIgIYZDMTEx6fZSgzTyDv7/O7bkMiTYpDeA16BGMyGL05U="}]},"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-radio_0.7.0_1566941028376_0.23490884436438075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-radio","version":"0.7.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-ripple":"^0.7.1","@material/radio":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-0IjsgdqIfSMvPyvBtpWUpyLxGnF2wMZTL5Pvzy4YRMWfkovWlgD1yjx5uwPCX4jbxjvNngSsVXyklz95jHNd3g==","shasum":"a736079b44131563912fb2a0132c94e64b01f11c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.7.1.tgz","fileCount":16,"unpackedSize":82325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezkCRA9TVsSAnZWagAAXf0P/1hBgQ8XRntPDRwTUP+s\n/WXuLwQA8bbH7av3EIyxgRd+WDbMEAwIfTw2T98DYItH8p9LO3/Og5RleOub\nTsaXMTDOB54IxkJ09N9u+x5lzQxlkus0oK7JGvEeRRGxrG1zleoxft661k9R\n4FCOr1nzrMmndcbyMKyJu13b76BGtvljkjdd7CjK8dKMIpFziDFee9EzrBc3\ntzAhgvOyUQNSqZkd9Z7dryc/PrZpd2lJgikCY53W2mkJKBXdhEM6jsbxJ9up\nk4wk1lYpH5D9ECe/jhHT1f2n3D2oHMMpEbynKsgsj5te+HV/3/x5bvoNBtI4\n7Q75u5lWXmpGD8bmtf6YoXiz0aWjw9Gsz1LdrVFJliuG3hPa4XwCtReLMXxU\nji4WxzAkgxaqzEMIlYGatKe+ZMlL8M9rFYIMqllfD3EacauwH9vetnNa0ySP\ntrnPg+Lz6sBaGKBXA4bKQWBbiSvrPSwC80uqukqdU+t0M1JwgZNdu/inYis2\nPFEKEgcKqVO5NyFHLGzVL0suQGZtHLLtuEL9u+/isPZOP4myhZEij8xAUibo\nZo42az6KzCzk4V5qsIGmFLusM9QcL+h+S61uehycqtBtfEVkrnshpDb0GzfA\nop17cGhawutSIflZQe+14XIwBbXrHO8UqF+6lFe5eTrYDL7LHc9xL3KCruGP\nmi5N\r\n=DYSz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmdhxwvcuSxodgEyAAyxxFSHT6NVqt8Sdnsfr8pRgc4gIhAI4JaFpZsK5LV8rSh8w2R5c60qMdW4OhN2EWsVvHkRcq"}]},"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-radio_0.7.1_1566960868209_0.9148268836814599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-radio","version":"0.8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.8.0","@material/mwc-ripple":"^0.8.0","@material/radio":"^3.0.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-radio@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-2/Rblm773bD6CXW7b84ecycWSCJVD1voj9H8xVC5RdrTHXeFb1QbD0rI0KD+yMyLNjNOQlYW487Ih6bJ0iujJg==","shasum":"aa5d3106671e5d5b4d4914b58faafa67e058e1e4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.8.0.tgz","fileCount":16,"unpackedSize":81282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+qCRA9TVsSAnZWagAAjpcQAJatH7OcGVbPSm50FUOK\nAqHw5QjM7NbPZVFwmw+obbqFz4ebk2aHhPB2ytdkEtxZlsetg4bMztTjJqp9\nEXMbOlQnZQ9kMCL7uoyUHPB9ojMR8l/tSm2TzAebl+XCx4vrWyl3o2iCt6ws\nPvsvMGgm8yl9ZV8gFa/rsSBgeeZ9vm2+PDufr5HdsHB+fEODioPY9heJQFJz\nBe1dDnBPGE89DhnS3wMeYh2Bp9C8l3jTXTDExleCmIBhLT+Yuz+EoIZlMHcD\nYnGyDqdw9XHryOJ81GahPXluoL5ya89ccGpC9ss6Z9wucmkVwliZgELgMsu1\nZ1ok+QC5L8lAC9s4WAipQuqu5kPb2aNzJ5RB9wWbVBINMuEFjLBuvQDixh2j\ncQiEQV/YLw0Q3F5KCfIVeEYvsBpLQ8nz5BJjL8M92y0zV1R55ro43PEto8dh\n6L85DszZo92WO17dDl5nz7G4n9LtVqZUuweLoyGn3C1+Cbz6ZK1mtFp10aH4\nPwG8Vxn7/XTXwFQYRX9oRd97peFacmrGKYuvyYnMPU/tZ7BAeCjCZ/RdGBEn\nnqczJScIWSLUS4sIuNbBZLlwVs4NjPOUyT7AhqETqIegbiBGXrqNrC4TR6WS\nA5vRejSXt54Ng+GO/WbA+IoLJGw1R/xHKmlAPUlD2HvKeJ9ejw6pBpxhE2oB\n7VgY\r\n=CbVr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLd5/EBZYD4RtO/JTIXRE7NtIcA0EON0yjDBuhqxg6WAiA2CTE3M3fUYRbEnhl5fvHl3zI2j9DWO+kAwfIihspqRw=="}]},"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-radio_0.8.0_1567555497648_0.21913231452316784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-radio","version":"0.9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.0","@material/mwc-ripple":"^0.9.0","@material/radio":"^3.0.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-radio@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-H8xhxUmDYt1fXNmm64ZCuRmw+oTAPhA5miGcbkT8e5uFYgp4WmBw+J8qQpfVjOzi9QoGtnCilVcu7KY7nZB9QA==","shasum":"46eea19de489401e00f6f0dc1c1c7be90a598233","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.9.0.tgz","fileCount":16,"unpackedSize":81164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeQCRA9TVsSAnZWagAAoGQP/juWy/ZWcyvj9ZqeW3z+\niigQP0c14dJSwQ05s13+DHeOYLek0S/awZSD0f/uFoIwZch5D+SY7riJmBob\nw8/I9aMe3tK6xlIbWCVnLRGzsjWli1u5I7uj1lINkVexr1er4b5X57B+3y99\nfU5FBaxAeapuvrQcS5GISgNwwvdFhTE7vf+mMReb+ABQOtpWggzMdvlLlewd\nITF3v1lY4GsJ8tEOWOsi+ExLEc+JQJ4+XviEDLfmqbTXicScXNpIpniuNiAO\nrRpkHmtY0kZ3SIpEsAI+ofUWw9UH03A1J/SH8Udzd0QpSJKoZqTl3yhBJjxG\nahpY2egSiezySwQEVFg6kDM87mRY2fgNsw3IjXTLqOXi3XseGFf00k3W0HGV\nKD9Jr57u4ft8PF4Gj8lGUxiS7T+5GaP2HkA86xHpvS0X50V0sibqyW+G3jDm\nMv1wbk4Dk/BKFZjIKWVAYW3KGkuipk34VcB0mZrRJ3aK6cXycPhBNjs18wjr\nGZ1uKnU8bc5NSjm4sNPYzR/xX6GtOZ4ZCM2Wc2UmuQ9I56owg19f2nOvhqUC\nJuI3rqL8yV9gMP46VqmYr38qDhOZH/mEhQI9gdwSZiH4zv+jxb7wRkPisonG\nck1bmsVsR+dmOPH3r1IpNhbsGdpheuijL7odDkkCi2N7T3zdR8tea8CmGGvj\ni1+i\r\n=LVIp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZR0LYJW/3HVyoHGD0R8aUkq8kOaBF3y0k+UfI0aoC7AiBTlXBTWyeI0KfUL0eH0U7s+90r3sc81/AP1MsHvL/wbg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-radio_0.9.0_1569548175435_0.24887221248781777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-radio","version":"0.9.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.1","@material/mwc-ripple":"^0.9.1","@material/radio":"=4.0.0-canary.e851d4f40.0","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-radio@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-Yqh42fyt2BFkgslXLrtyLLcQhMYdGJiub5+sQYxyPKyb9YggYHQVtj5rTzQQqOBXJC/NcXTiuhe49th+VN45Kw==","shasum":"52bc223433e5d2d496268b0a3cee1359e6835d51","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.9.1.tgz","fileCount":16,"unpackedSize":83417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4JCRA9TVsSAnZWagAAiKoP/jzJCzMPnyS1C5hfXcVe\n79CawD7SKAS05l+Hpdb2vqB1Y64qdJc1hQL5g17mOCLOtiBt2zbFaAC2pJ4X\nFpGDRklmOsQpZ55lsYDvqEuL+e6MCYO/syNNJxBediFp9ol8ltBxil+38oI3\nbi41IkExTmnsfka38GaQG/PZcUXl9B8zXZhqffGs0B9N0qsckBW9iv9ykhfH\nOVJ7V10sP0Hr2dlbjMZ0mtuFCYGoHAaMSGUOZQa+0jDxxx8pprvG4h0hZSyZ\n6fEz03Cnjm2ofuWXFae1FjQce2eb8OipoV8tKIXtv/9JA3Vb2CM+cIZqGtJY\nNKpwwBItJuSwiGaKmX9Xv3Wj4pRZj3BmuU0uYXqyTFcf6CeRJeiReEeYquu1\nlbwrhgLFd2JooDJOMZ+uHGasKHZjEpIZzjXUswqaMqT6yKGXoXAOQEGAN2hB\nxN0o2y50ZZx0E6RGS8QjaljkCi1CfFoQkR4smprmZrIicopMw9FypDOk/c5P\nhNkduCJ2d64nR3viosIoPqZ8qJOHBumNto0mwxfejXMVw6mLEtjC8vnoz1Wn\n2OYvSLdRNSc4+l6CDliLgtdvWjvBJrEqFOZzdnnXTuuCMseYw+/61DQiV6U+\nuHOrNStgZm4JGfLCmPmJS4AlLWg4wAK5CayhdpeRWcu7GBCW406yVv5TVsA4\nPN8Z\r\n=Jwb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFdeVENZYzcMpp9O7iYFw+larsNN2Oh/WvzhQrca3qxDAiEA2d9GUGTc86nDtVncQ2VNiHgALOTsqRz/FXiz5NwMr5k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-radio_0.9.1_1569877513354_0.6758195200195387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-radio","version":"0.10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.10.0","@material/mwc-ripple":"^0.10.0","@material/radio":"=4.0.0-canary.e851d4f40.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-radio@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-BQXs6EBSPwV+23Cs3Qow3enwYAUcgU+p0xjcjbTLcwMCN+Ta6ztuQPJXAVP6NQzkcHmplFe0bnfTviU7wI4y3g==","shasum":"e76e35f76353669bda0ec0166c164f447de740f9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.10.0.tgz","fileCount":16,"unpackedSize":87297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAUCRA9TVsSAnZWagAAYH4P/30Wl2hHl592gjKA4GQG\nn70qBXwW4ePxpw4Zq5R21fn5LJAJL9WlldVFr2YFAVwXAWN5Fmai5EThMu9Z\nUFsEsm13S8crIyW/RvQ7rUGOTuizXedOkTuWsWqgFuDlgvs5uE3I2EM0pQRL\nQ2iOFlh7mEvKzq0EPG0zwhZFTDCSrhr37wIztAlpUFPUSREQBi2r0fEXTsEx\nO/rPAuy2L2+1rtZo1Won6XHFk/mccD6l3n56yXtqySvUeK770nWlW5IGdNN5\nEUqbqOjXVpyv92a5ZOhf/aGbmLhnjucGb3CbEdNuEHiRfQA7t+v4drbV8xGI\n1Sbl9TKQ1s1GZKcTBJVT1WbPwWx+EfYuFdkUr8GvDdJ2IxHxAcNSmOWiHZ0k\ngV/iMNRgWlF+GQn2WF/vEhQftlkuDQ28OxC6oRA7UXSA+grs0e8AOlw8vSSy\n9ZlXy0WXWdnUcaXBXrc5QOy40l8NNoKGwu8qaW7zqURqRJYTv1cG6wGEnCU6\nDfZA2/eywZ8nuyPk6SYAQJJXrBnFzXVruL0PBcy4jijHO3umfs6vEK/wlVY5\n2YxSSf6wvaSZvI11FlZ5CrQmjffswZgPDPeGns7TA1niMYFX+GIdfDnr4sk9\ntQEZrAu51NyKHQmfnF2pS+zfMilJruLyGWg7f/MSkDOgjHtia3b0jOuoMiVS\n/Lsq\r\n=kN9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRV6KbHHM6FlUr51xLPdpMsHWwqZ/v/7MWzVeSu6HAcAiB151/AdzpITftuMSw44xpyMHjx5UNToSlnPKSRY+Zb0A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-radio_0.10.0_1570836500045_0.9741688735066238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.0","@material/mwc-ripple":"^0.11.0","@material/radio":"=5.0.0-canary.5729943ba.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-radio@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-RCL1Vde8pUx0sHE9HhZnE95zwoII/hQp0r/T+vKjNwVpAVv9iPMRKRj8XZw7LQwwuzSPecyGlDGQ+FEmtavk+Q==","shasum":"5be3e3b1df43bb4fcc44770100af0544c4e17870","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.11.0.tgz","fileCount":16,"unpackedSize":89746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3uCRA9TVsSAnZWagAASe4P/2V4ZF/FSr62+q6yIeX1\nk3o9uBuojPVL9fDAfxtFdXJaEfGvlzNBC07Yg0CPgxRADyb4YQHHKBYr5PEe\nLvUa6uJlT55LhltjtMAiZnxVzGfPj21pCLlC2vOunUCeVCCR1weSuPDZ6lH4\nDEHtNRv3LWJnqZRZeB9IFhfsu90Gc9m8euacxtzjZjmPlgmf7zuum+XQqo2p\n4xD7uSd1NQM1dloPdQglUC/F76IjdyiCdT7OW8JK5jkykXagUczgZbMr8smK\nfkgDgtWvk7sKsMnTxxPwCpLIETbPar/8mv2DbTrcng7gsE6UBwQPhKk6iEFt\nWwX768aH1eylP7c8u/hJMW0mdH9nEn0vlM6yLUsINvaRQnduJyjEAwG27P7S\nGIvAdA2rInRZfsQ77axNuda4y+tFm4d9o66pkIJ4NjyGcAWNrN595PMNtwr1\n6E9FIO7vlKcB6LUbDMBf9mAsCXCvzTX+rU936jKqxsHaVHZmtG9kMpRoXKLE\n2Mr1/9RXnYSvyy1gjs4eeW/I+PNDB1ZO5B9lLeXeQNcuT7HdHPXEiMp6IDLI\nwqcRLn+gIEJsuh6SsAr2eZ7hqOBrMyd1YeQFdQr5b7VjvIi3BsSdoENuUduX\nbpKLIjYhAthBe5gw3SS7LvYherztSTHCNSBwE1HxiZqN8DoU1/a2eY1sYAqw\nUSW6\r\n=FqJg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzhn0ZTDT5hzA/xcYy4rioTq/m2KRZ8yXi0DNQ8WhNAAIhAKh6S0h0oDY+mKRyxdWR0EY+p+T81hKzr2MK9R0sA5v0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-radio_0.11.0_1574804973676_0.37628778173222255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.1","@material/mwc-ripple":"^0.11.1","@material/radio":"=5.0.0-canary.5729943ba.0","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-radio@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-nprBl9WkbeU4kiJH7q3AWV7dQetxuEeQ2faJZfcfqZvGCbaxENOd0eJruPP98pHtRFPwbRUCDFy98nolOxv00A==","shasum":"72efbb03b81046860801d057c2f1613b272e7266","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.11.1.tgz","fileCount":16,"unpackedSize":89746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLECRA9TVsSAnZWagAAf2IP+QAjY+BbPSvkzDd5sNHt\nu+yCrqk7wAlsntMD5fSLyPuvHR3NF03DCx29UvG1VdA+0u3XiXdVR6H7kQmg\n4bAR9rGxB/66HqHsqsNQqN4wj4WRcPRHiEfJrV/RNbnEf/RYmK6+Ixj80TvL\nDTNes9FS2goB8UbTcrsKx0LktL4W4ZWBRZcX7ypWh0ScalQic8tPq331MhK/\nBb9gWlbF7xKTWaiito42jAJzLpF0XqvD6MCpByEfkZSzgQheQy3X77bHw8oT\n4qqBzq0M2zu8c+jWahplRGeCVWkHlyzgrI87vI9ZIh/5O36763fsi66tejpt\nQB75P1uCFcWTpCWNs6yzpJgLYXApFuHaJ7Qq+ywQkTEIPf/GJ8pOhTD3IL+H\nSnX66wpnEKa8Q+8+MWjHgz4AyaT3bGb9iX63b/ZtBeGQ0SzpAL55Jg8M/+JF\ngB5Kd+SgVRLiJTZKEg8GM5uGJVDftL/0I1eP1Tuewyapi1V5j6NIZJ3kZIvB\nH0Nmdk/ZBLPa52LDKfL6A9LUYZAtkMRcPNdnhUhqFVXp3gzPSFZ0eaYEMmfK\nfNueynTmL9snLReptCMREn1G6bIy8IdpPdzEvvV7ukxAaHKmBMEFi9HE9VPW\ndt4++/L/nQpg0+8851TaaPVK1ikHhuhonpfOTViMA0mXS7pN/9JZqLQvDuUo\nf/Ot\r\n=uzh9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEC8SCrCQMWafn1wekIpdgj4HepJtjjrI33Bo8pRACZWAiAA3qu3p8LJjLjcsC2YtJPhfTuMccQfC8dqIFJHAITEcQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-radio_0.11.1_1574814403764_0.4589346722817387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.12.0","@material/mwc-ripple":"^0.12.0","@material/radio":"=5.0.0-canary.1c494e567.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-radio@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-T1KCG5VWicvzsa3hAqgRyoYhwZSosDyRr27Cx7Q9ZpkzV9KbJkPq6o4g516Yd4FbJNM4HtFZylsY8qPFCaVYsw==","shasum":"d1873134b78d8cc837c8569f78139873897461d7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.12.0.tgz","fileCount":16,"unpackedSize":94211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkxCRA9TVsSAnZWagAAyPAQAImXh6JzRB8oE9Wf7h3b\nRAWNirugfAUWwnUnFMBE0Jm4+ofQK4MAnz3ZhT2TGLISHMiXBZALgvHpPfLi\n7hJ0g+m/NYtpRISbPzeahrAYxFYkx1gHlF+E1ca/h1T8vB4sD6BhxXVxbabR\nhTGLXBBozYcxqVUhRLcgrbEplz6jb8GqGHwW6of/kB+uJ8gEw+0ESamnd+yO\n637T5i4vbB88yFddIOACUjLWSzU5UUSkElFplW/koSKeW6pij4EPNOhuqw0v\nJGqOo7pA71uRov+A99/oW8UB978OeBCkRa7oYLK5M9kBIzGzwHnt6R6G5VIR\nhWvU7/XGHGuE2WhAwrojkM3avr559lq9peMFAsgcHcURvNUtHiJRHCE13rxl\nUaGCjhgD82yQxfaLiP+eIdWsnv980Y1TFD+76St+5y564ilUlDz9QpdvDEHN\n8EncEXGTOZFnV1s02lLzkfeJMToX/oETxMt00a5hjy+ZDvpgX+QnEJBG8slf\nG2uxh6pyBGDDajH045M7CMLG4Kl81sotRrgxQQ3rvSrUo62Oh+uAJmx8QyAy\nQ0pi85lwSewGuYXq5Je8I9ZlEAITEr9Y7Op1KOdwT8JVE5grLmRMlxmLcNp8\nOfHpXCiQwAV7lOrlJyTsInXKLEHvviax06qnaW8xf2iEpw2STAn+qkDMXFsi\nlNG5\r\n=WJ//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfitVU8Ifmuvg3t1U9kR274NT1rsVCIw7FS/CyF/HvGAiEAhj/ALNOB7HMZ+WjdG4rVBlmy+fnTJUQbZiHrx5qIZMc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.12.0_1576626481041_0.8494092654143801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.13.0","@material/mwc-ripple":"^0.13.0","@material/radio":"=5.0.0-canary.a1a0deb3e.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-radio@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-4UbgDWZmIAbLb2O+6g4yTa7sNFObmROmnGehN/CSjLQj+sR29oA6kN1OCWQUwzGPiAYJ7dLkChNwJQNGZTRueQ==","shasum":"6b6989af755c4aa4ca85ce30c772c1573cb0f39a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.13.0.tgz","fileCount":16,"unpackedSize":96275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPcwCRA9TVsSAnZWagAALgoP/38kszC3qyUWPyoTQnFx\nQauFpO9uFp0rRhzmGmRXqZoutLYWJ0T0xVv8HDO9dw6grhmCVK50Z2QPVgmE\nUogBM4ipeT+QzZch3TwiIznqYFacSqLlyYzHh8HQbk4qYoxvAuWPcepTnmaN\nw9O8eVo8MJs4oQsZ2BA95IRbZalvmz5H2+dDXVBYWTrTA34hlweYeqwhnzcU\n/rA/9+RV7gwLVGQguf9zbTngqB6szDdbLs+dINt/IBgh5wPUN8/n9oz2aHAe\nQ7+uZuq0weUOBgmouwxst9dPjxrOvbhQKsDhpPHvLOCp/y/xgU2qjy4uXzq3\nn9/5ysegFJohiWkujWQ0zk7uARAdyj6Aws06XQuvKgaVZI7/etR5eoFJXXK1\nXAD5Jde18iwvP4nY0RAMW6ee62Ry9RhfKehYSX+5SO09vHJFKoNVvyYkrXMK\na7ClwvstsJvJS6MPp1VhdFRn7+u2dFivvHPj7LeG3XFSl4ZEdP7uHD/l8J0T\nKVZ7DsDy10WxVuNgDIG1679pU/JGVa+RhTaugNBbP3LZpQCrpPe46pr787EG\nTgeY1mAHXxVSpAE5F0kw114i5VP/I0Ci61OKzQRWuKUcJpBjK6B1rbQQKBXk\npbJfY7zkgZL7smhx/2WWubaCW+aYVZlOGHKCRXSCy/8AX1W5qzM17tK2WRYd\nZf45\r\n=6J/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5p+gvrUCVNJDRYhG5dCXLN9pWWNhBfShmmp93xYIU+gIhANg5Kn/hlAYyogX4NDEiajN6CLIhXRg8JGA1wBVb6KD+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.13.0_1580791600447_0.7327976808993952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-ripple":"0.14.0-canary.f790f713.0","@material/radio":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BjSc49Wa7S6QcaliR/zVZ0nruBbhbJJhQCsVl6JZr5Fly9+MW6ngQ9Lrx5gHr47pzYh8pJquV7mMwJP3bhgRlw==","shasum":"b55ff85579d29b333f69d49f6300897ffb401d1f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":96327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrMCRA9TVsSAnZWagAAaa8P/j+kzT32CJccCY/AevaD\ntZUjWbIR7+qnmXIxVnGgdbX0D4vhhPHibtLFe5GTK1nOtRXkA+pfe/BO303I\ncIloVTSUlOesC3KB/ha2uVpdCc10eCaK9V6yHLIA2bWcyQeLuy5cRG6feyc0\ncCe9o9qdh5cY9VDgs8+2ez4PgpTIHufoCJfi7Bj6BDhP2Dypol6bf+ujPnAA\nmvsSWe3Q1L9dGsOARJG9LG1pN3meQeNPUb6R2HGrVggHU02qQzjaeI5qIGnw\nSBrc2VuWrihYZ7Vz0QeQKMWYYizAAWMEqwgmciKkS5Y8RZMPXjNYWEZzoVWT\nPC5a4c16aaIIIkM4s8IP7gvIrU6ZE8iziQ5NlMRqaEcrzfAMrLMMJp9d26Qt\naPvZIp07YBM6fkjUqoJkqLkCraD7ZFbfa017+oGcvV8icEahTOCy+abvQ+nr\ndhp0sl4Iq2E8aTBmm7AcGRlsj0UyyDT5zCUiuAzb5j72/mJ1nTlO6R9EOq9N\n7uSqGH1aSuaV7ADzuJ9P+MRRv9S7qkedHrd4Mj8sJQWirBsmuWcTkw+Iceh3\nvRJZCsYLmqA/OP4Znep8EaXd46xQSO/U6UXIHgWddkzPZRuJPmMq68BCg4uo\nBle/zjBMa71ZBMejnCy8N0w/Ra/ulISC9C74KTD2PnK/v+WU6X7T4mFRztA1\nVnzm\r\n=XCGr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWroyeoVHhfoGmPrOflIHeJC50nBZPVArYV7dHzm+JRAiBeDKFlHRbQ1JrQjEem7nXUJStPU3UFRvcZfqTRVyrIvw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.14.0-canary.f790f713.0_1582856907760_0.1307719178720117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-ripple":"0.14.0-canary.c759cfbc.0","@material/radio":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KcV1PToFedr0h+GgVQ1lvahHuyr1hMhIwg9lRSyy7QNQgO1O0Oxc0yRt4/E5xa54YEpdPztunsLTN48KRLWJwA==","shasum":"cb63c46cbf003329b147403bf7feef0555397784","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":96327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqvCRA9TVsSAnZWagAAjhMP/R3/iqUR/RPCJZvATDh9\nuheSiYu2pelnZQqmY7G4Kpi9M5mepIfCQXk9k07lOIGDmWv+N8tzC4rbgNGm\ny0IIDmn4dpnoN9W14irUGAw9OveYeakfkurZ3rfFiveqAPvj+Yx8k4BSokpy\n7rcb5aG+dWCnwNm8jo0pbG+AkUhRggicSoADZtwdlDhv3wL7x6FzAn5muYQH\nH/MnKtKxo42l/8V0H4/vDwteA43bAdrOA06rrLifsjQ0d2Rsh5TQt8rar/8Y\n8XEhniYcu3dF3g3HzCrBGx2+JPhkReR87BvJR8lXtcqhji0rQDTT+MVKxivx\nNobTZck4VNutFf5mM8UMa1BbCn0M/atk9pgGqhg697e0vAgfMG8EmAhlOwgn\nLrygTn8Ad7eih1kTiFuqQ0T5CGemyUA8GeZtsUAViSvXDAGSo/iB6QYTPjkN\nKqtf6/DpFA8tAe2XrFPNcowM+FatIgSm8bV7yyLmWgTWDCY+nf1MX/x94iya\nUVn6YWSkqejx8zGpFpigTYPlMq/HDpl3q4h7mKgZnav7drt+XAQOYnzoeSgV\nIQbL7wwJka1HbzNhSALMD5t79AZjyu1yv8gpjnDfZFHlKDw4nQlq3pdupWS+\nOXDExrqVNPSLr7PjMOoqhi2aHMFVXvAKJ6bSpLqDNjFcZE0JlH8kGsi/A/lz\nxmiM\r\n=KvMW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk0GxjdNNY0jrahAsTdLUGh77ZiU81iD4E+73p9/2JfgIhAPr47z/k4mR4LuOGCXgWhtW1uVFjPhTo5XxSzMPQbkip"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.14.0-canary.c759cfbc.0_1582934703467_0.6209894440150936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-ripple":"0.14.0-canary.97ef53d8.0","@material/radio":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mgrsAaNcrXLCrKEENkgMQ3/R4vX2/PJtxpI09hKmtID1GSDj3mA3Esd+aicZExkgnHRSJWNBKyKUv44P6k696w==","shasum":"667b075920d0558ca008b2df9b3d7ba879ebe9aa","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":96327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3XCRA9TVsSAnZWagAA+H0QAING1pcYfyhGw7qAUNAG\nJE76n+tjYgKlOH1FzUVKDKpi3wP7DqzbIFvaSd+EQ3eCexKXq9dJX2OJRhx6\njTtOzdDIwC9EGhxNRXJNZoFMMyM9ZeT8l0oHDJGz8kLCXKds1Tro/77yUhNO\nNDF3Mk4hgt1e8Tt3twam9Ti1k+rTWNhCFWuuDT1+oCNsOKSYXQgWVvmcEPGw\nvkvAH0me9AS99IMJkpbe0XCdeTbHSV2rYeiMYTV7hFLRgeTBcFSxZpnO1FpH\ndl4xZodRD4MFbwBtsEWmLayuLz+HHUbQiZz0fyx4bY01wz1S5ZoaEX2OUAzf\nxgS+Mr1RI6dvq+m61qFGP3K4IJGrW0YVGY0vftqDsT5/AvPNXzs2jH8xHJJR\n/XDx5IsAo3zE8v122oa+EV+Uf9leO/+a1vpv8hQT3uU0NQT5TgDeaQVy4uGB\nSLeKMJIFpo73k5XaIhIHso+7NYeVtbBvdbRtuT1NnEuWtpUgWMP4a3nzaXBh\nnG4LqLkOgQ58+BWrBzAJTWztYZ2DvEdq0tDA/RyrCM3eao8noIqtkVnwTm2E\ndPyXrzBaydrHG1D3YYDBIghBxvtEBGETMpJI/6j2vhhXUkgbNE+FO09Lh9GB\n6B31wugrI/2R/BRk35CC1uoVeLN+GKiD3WUBRgF2gvOx14yJiPLCMaFeg+k2\nSxai\r\n=gMUH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBO71m8HKXcH7AiTYeKuFF43tiSV+Z6a56HbPCwzdHvCAiEAmXS97nreI4z5BYtLevW+ZyvtFfrIJFGijn5ZB3TH/K4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.14.0-canary.97ef53d8.0_1582935511223_0.9449142599268896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-ripple":"0.14.0-canary.24f5fa6e.0","@material/radio":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WihvE5wypy1+DxW6Ztq00p2plqxOoIJ2d3c5ItvxMMvtWFBjtS6MWFyqxcJ75SxhPvBk10dmOIJIoKW/xMukwA==","shasum":"3d8cac2c0840c0e659ab6a48facf95459ebfc960","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":96327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmpCRA9TVsSAnZWagAA40gP/A3Iw3mrnNbaVfCFHci0\nFdram+dz1EhhxTi5GwSlWk7+T+/GjkPnknsWvV91CMU0EBj4NsZfAl9yZ+oV\n3k76erP3Fo6eg+gq/vGCZja6IiA4XbekkYRyzmfceB+Te+p7yStzgMucY74p\nuxe7Gj+RQkKeDmzLxUe2++vlVXNX/7gy1GQaSSU+flWmSkQui4KSO41/CwN9\nW9nlslaQBfHLng59BLUruOAuKi9bVpJrGDrecQNZ8wh8iQ4ZzDN3YSthPDWu\n7EOqUfJ6Xs3eJqwBA/UMfs7SQ8doSiUyqGnkpokiU11k7exSBNVdRaS2Q+ql\nFd8MOQad8cy9jW0y4JWGBcXKH3iMATS/qr8FTrbt1vk0rhSUCCDKTs2fQFgl\niVhaaELNN3nVhTJvC3kfqeQubxlSn+pLzIhmLblK210hd61DPTmkuSqf/bwt\n1874q5w12QXtXGABEguC8X3lVD6mSy0IYSp0wykm1ivXuauMDevSzUaytPNe\njmUHGeEBmfifOWcwZsr5z/NUhDZg+MDMjGQjAWBeidCjRgsXpCYokASo8JOP\nP38AasvQ3C0UEoAynD6NmPxcT/Cw0iWV6E8U1xpdXwhRKG0hJOr6YDdQTjE2\nlzdjwch2mIgCrE+jvnuYMD2OdvHEMbv0a1ooFJZBkWbyOfzK6fGK8qjdQW5i\npmTH\r\n=wt/5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICm4d1k+O2LflGuJzci55trOEAOzMNxbaS7x5sVHaDEEAiEA8Uh576pCe+U3ptB6tlUL96byaafbZx+9Fy8ngvSysRk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.24f5fa6e.0_1582938537508_0.4978656650020086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-ripple":"0.14.0-canary.960e214f.0","@material/radio":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jRtQc9Em6oWyZ43XNqUhpy1ZEqbVKTn+GPC9spOtd1AF7rzQTsAfY6eqkUJK4TpPih+Cg6Ab3ITG/3yU9VSShQ==","shasum":"de8745a7f837cdbe6f55cca35d48abc46903faff","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":96327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXbCRA9TVsSAnZWagAAcJoP/jn5VWklOG7Zldks6UM1\nOYTn2cQOVLDAhms+4LbDNEWwfM7QqxS44xoIJ72posPyhQ3hPLWmp5njo0vG\n0MyBsiy5a8N4q2J6TGIFkVd3qOFDf51laqP8C+A27GRxgw9yHgMPq0gCfP4F\nPyU/2rwDAmbAM5xx1rtkL/bR87ZzuqkUZoYrVukdu0doadnndEg2JEtBr2IV\n82ckSCaPS5veXj8iHrQY1mTxKhFOFsvDGWn7AKy72Aq+7C2QCE58qAg3cRDc\ne9iRsspH6sq9goY9I1cIah38nEclANiRPPP+NthgSNBH8vpx56Rd0WDTWJ6q\nFZm/6OuiCpqRMDge35hAtFJzJKurQwSqF7NcZDk3EqH4GhlVErW8tPLAMirs\nJEF413ygvSQCBdRTkX4MkVNcjtW2aISStu+LCZ046v2Lh3k0OLJNlXszd5JJ\nq9iZiQ7nI4C/ni8jOW9o+Qv1i0p1GwbRCcp3Fnk7RjLyhSDdPfB7fvy9thit\n8ydE9ZRJUlh1bfcHKgX2rvcsFtemKKuEOm9fMsnOk+Z2c/O1uICh9HlypuJ+\nEkAsOeikiGABLlou58n/atdoaCVDEhNK8ZFX+SBB3wmnO+W0uXALZc9NNyaV\npW1U59TB366+AvwukF9MQDVQ/cW2ASvezqpE1ZMcn2xsMDbN1reElez/EXx9\njxqu\r\n=Xc9d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEk4SLiaIx7ErNwgwk1/oYcX0OjAa6EWOOVOhXrH/4URAiEA22E0Lz6Z5tfM4bMSvjVxmUUztwdOsByGZ8iCzE5dBc0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.960e214f.0_1582945755236_0.55946413510109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-ripple":"0.14.0-canary.a2f046f5.0","@material/radio":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xssEdVQ1SVgxiSoj1G8OH6HTVhZUwDRyyovs13gmxbI8YgqMZ2tcYi1NIbC6k/7sTX7oPEOcrJjk7p+C3QyFHA==","shasum":"6b518a596cd54591766d8217e4571b1c592dedfd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatUCRA9TVsSAnZWagAAmioQAJ+kWxhiS9QlX13XZwZs\nkZpnnBjm0I9HcF9cN/V5/t0r/x+xNg29rd80iSSfn/mpPjwbTI4/ko79P1mD\nMEncvQj2i2QX7Gbg8J21GNGmPTs6WN4kHNnjRDSxIvFg13mE0A/ko+SvbFig\nA/264WduMP+JhixHCWfw1eBO9dgy3odTkX6SX+0LTEFYJcShar/zueO+FDVa\nHyDUoJ9EAqSrNz0MV8qCxyDxBwhJnJs03M8URfyvqTkGYSNp6k9UJkdLYzAN\n0r3F6we6XTGp2m1K85tyQWMBZcXIH+vdiklmV2lqnogLFgpogVJfUR2Rmefm\n8zukhw+5FkKvNLObSupIUZkQ+szIHBbHaiwMUUoU46dFDZlEj0OTrrckzZZv\nxh3bNF+W0ldbuKzoqvzd0D3GVTgM7iypMitbsQqT7UH0uK8gRRzNmYP4JmTu\nn0MjuqLMkjPCgarquJw+3gIfB5vExxRYKo+8Hle3CdRkc2eV5U4KfuPE4w9b\n1hoSSpvemqgZPLq+Yvo3Qx9MC7BcEfZLewb9JD+BAZwYO1pPNifd2FJNBMRQ\nUA9+ZEEIcXHeWEjZOl+7Z24fGly9Cmkr6uaLhFY9WlrU913/uuASDgqxVXGq\nAiy95YRcaen7Xg/NDt8AUqTcVLZhPbMUxOnZqwfYGSc/up416n93feS4nqIP\nnprI\r\n=nlDm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTHV6JwItJVQMdLqDrBo71RP8fCM/oJnzIyuZunkDCUgIhAKLb4ppXfoKPBAt/d+M5M/QhMPyiyJxMUSp+4vWD3ktQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.a2f046f5.0_1583197012089_0.7084765779319415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-ripple":"0.14.0-canary.024f371a.0","@material/radio":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PZSdsPxjio8LYgqkgND2xrVG15hMUvWER2zGJWHlKzurbyNOjyWd0HcW8/tLBJqq1baOS+n+Vg5uWRkcNUMqoA==","shasum":"e2439139765eb657c03137336ca41b64a43ea527","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLgCRA9TVsSAnZWagAAMVkP/1N6tOPV4ErEUoDfcVp3\n2FooO2ogqmdkaCBQIek6YOTEZPsezV/QjhFgbL2wmZtlZKQDz1XNuSuaDKfA\nviDo+VnV0ZVfFLs5ZCeeZrYtvW1O1cHiP4lCPyT1+/pIfM0Fy2r3MLP5Kl/0\nj+NNt2ZfA4sN+GHAX7KnDkvhvUTmOfkw1vI+K666dUxSZYf6ZsVDXZ+yXZwW\nRqLmhwbn8XmLUxb02B6XT7ye+UW7Mfoe+8//A4zJQ8x5QiPN5p+KsQ8cobL4\nkdDnh40JaclVKJZru7RaDTeTX5REOLTufq7v3OemK29qMZYpyaeJaW0MJm85\nCoG4NPSIhFY+o4/AeFaCN/lpaUsJZnZ2PcYJCpoMItpyvgMfNg4YoXU6VHZ8\n/giPOoDRrGewbiwLc4IVnQvW1WWA0qJQkQ7TEBREHVSpZYsPnW2uQMPgze7U\nXA3gNlCM2Tx08ttPCtNbaPfG3qSpX5TUQEo87DSWhpxcJYKFlQ72kOLiDcPO\nUCdYSC37fmalhXtPlg+1hFb/2QXcU0LdbZI3APUJpQgWyFhj2sR0F3BkJVOp\nc6WOc0ujMyhUq/7FTGmHQJBbXaUcx3GMDJqPOGWXXc2p0BzfsdiQmDxzS9T0\nNYiu5mcgnD9ee2+nhQoHMXJYc6tOn9I8G8crURXV6OWAEgIONlWbXf0UE83p\nZ/WI\r\n=Mt/N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3qHs/cl5GhUfnX5G8klrJKQots4KwXOKFcDKtGfcUBAiArwPJadNQhrLoWreowfJTEw1Ui/BBEJgZmvzcc2WIHAA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.024f371a.0_1583198944143_0.33110117669344663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-ripple":"0.14.0-canary.2f164110.0","@material/radio":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-O8ZybbM6fFGBXIwgP1KuRn9KlPvPWMLenJ4FkhIQuaOjiDoAgOauD0qS32J35napk4t7z4cRpaO7SuZicO/Oog==","shasum":"c59c032c27b4a1226057f37d9920af6a022b0cf9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1ICRA9TVsSAnZWagAACwQP/A91EqP5cGyYbEMEX6UT\nyNjipDVWV/Z92ySRvHbLw4qThuOembfVzxjKPvPpG2tVxNVd5SHaGNFITvVe\nLhALKiKNkngjqLhLdvU5VmWFmOirKx6zEa3lLlT0QYaMCz931aW/mFpNT7Bu\nSSxx9WZjdLiw6wU1yfJ/dE/Q4w7Zxd5Xdc5kUsvGB5P8jZiVnVUT3hFx25bo\nSp6o3Sx7DuTRiJcTLNezFyv4uBQdX7rZdFejfyy27270YqmdrR2TWA+TpiyF\nMWvBxowjfn7168CBlFWRRzD9INBzYusK+FzVPBeF1BPALRCBTf9JBGC4Nsm4\nrox44IGN9R5tWJDKWW28TB+uedB9ht2kCKtELD0qOkUruTBy8lE4eEPfeQt9\njGRzaMMjTqRisdjrSZS4CbC+JY5TC4tpd4prwky9i+a1bP78dR7pUhe+ZFhy\nUXOnXrmyhJEdXsUp6UqiCDEWuPVC0sXZHunjWBg5s+RhJjKRgWsl3oe/KlF/\nb6Bg3mJPAm1LkkwJshQQqlkV+KlbbTdX5XqbDIZfjvng8lS80J1/5SSl7zH6\nnYCAsblWwhTx8cIBPMteuQJnzfx3iuU/Vz82LbihnZ3Ajlozzb82WO/s0k3L\nvMrIsAJ+ipecpOGJP9UQifEToxanoP0S9Jd01Gx38pn6bmbHbXKUV5/Hgen6\nOxFM\r\n=vfxQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxO3VKpYyZYpgEhatuoWNPWyvd7Idtmoolhx+7Ea0PbAIgM40Y9KiG20jLGJ49PsrBPUfQIUKPy/C6huftFR1jM8I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.2f164110.0_1583271239666_0.36829342847408997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-ripple":"0.14.0-canary.edd465cd.0","@material/radio":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gJqIW0xHIBi8WAQNkACEgjmS8l4elv9Xwvz1jNxGI/umqZO96r+yqG7PAt2m3FTz8nVw63hj/qEfnyyqWOFhOw==","shasum":"862b8fce58068d98aa722991fc5011660eed1e17","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIPCRA9TVsSAnZWagAA18YP/R7ahgWj5vQ54Xl0WbYx\ne949YuMdftZ442Mfgj8z22EgjDqCZPsWkP2Buw1m+OiDevPPq88PxiN+nq0P\nG8GKzkbsHRfOwXZx182ywvS2G9RBbDClxFyTgexG/ZrSZKdb1B2Ptj459J2x\n6ACPRVmZvwvsRhGXrcuiLB3AMMyRhO5+TO51ia5Rw/wBgCbyscjw0iMVX8bC\nGuyakUU+uXrpaAcnnGh7Mih3s/ZW9YnvNj9mRego3nfieIrOUHbs8NxGN2zG\nI1oPnkO7jFXVm4YMUph59xv78L6dz5SNrveu2NktJIWfs4cdU+j6ArM0/3tJ\nJ7D5HHu0WHdRNqorOg3FxSbLe3mDvc/NtV+F0cYU9+6AsqwCi7hizp0Vu0u5\n5wE6BAXcIK/4OoXDU6jGVEjQR2ws3MBEj4hhsBrkihxm1sAG1Y0MiNhO4Vjt\nOAENj9Qj5XuIVZzmI+yixlfS2Z0qTc+/PGS5YMnthHhhr/Md9BQr7zhhQVnF\nB67Q3TMEIdzTIuuxMldPxHzfhJXmZ/jGbJmuQZY4wCpZF5dGltuDiqyXu2b5\nnRHYzt12Lg/WMj31gfYvqwp0fl9zGPSY0iEMTLJCejTjKAd+GvlKb/cN+i5/\nCgMNdw0HyJ3PjQnxm5HNiHKQ4G1/qu1Kg4PuElCJiFvLhrEZ7eVrRNBo/H4Y\n17lP\r\n=bW4B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFzCcKnpgoFwzcG0mmQ9JXc/xLf11Ksk/MgmVMN+HGVAiA/VxoDaPeQZUclncpWqRxIFWm5+XSwv8zz9z1QNLQm4A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.edd465cd.0_1583280654618_0.876342658142764"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-ripple":"0.14.0-canary.2b02d017.0","@material/radio":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EnKbHa/3BgCjD+j2dDancf+LHvbzTgKA5r6XazXhSksC0Jp58df7vRQCXDiYOsSnmKnHc1kD15XqYjnlwA2TjA==","shasum":"aa1f083b4e087772db899bb8502c8c040c0cab96","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1LCRA9TVsSAnZWagAAygkQAJz85qXOhmcUz82GSji0\nqUYiwJDzwzio+EN+JWnPN1QZsjVxqn76z2xqywwHhlBjWJR/Wq4BipWev71r\nWu1VNwnu3B7YS9KebDRccYdx8WcPz4Rf1LVKb1FzbEQ4lkcHjTnVSL0QQkcm\nF85rTAerAjIpXyrcbuJ1umDWA9Dm9cutU+LUGzXgQSCfed4BUZvf6IxM/74/\nRGY85Bkqf0pjRIWXj7/Sog1NK/Totb7XqByL4sSAMcfQb7ON/W9VDZdUP7pL\noQogpDhR5t7UTUnoNofjRrDVixmHKfcZs2iXc9Krl5Ui0R3NSK/RjD3hNt6Y\nSCiAxG4wR7wIgms6H9HEFQQmbydDQeIlJZDo1uU5gGwStWUpZZIOiLfurC3i\nd2kjNcv8VEi1hZqB6bmNoTPQnyXc2WXE4dh8w3K5+u73jCvEu6mhlpVkPeml\nscbjdhxMBIgsoX8Ma4a4UWD3NNq0u6UjsFJvA+Z3UcReHsHEo6IFcxgYNKg3\n3z2PT/rW0mM7WL7v4xMkq1ey6vCseUt5ddtpYKIPWuD9i5WVCcuNsQU2YLj2\nJ16zR6DeFTq3fhAyxEYyp5/P8QHcc3cc0s6az4cq/kHwQNbCUC/koAdUdd3w\nY6daV+yshcMNRXzLzRZH6XKIQd5LG+o8FaNd1I+hOHzdzIoxfBKRZp6m6r2+\nOlUe\r\n=+Z7j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTcnmnL2JZ0shhB8iyDGwxYjcQeTNcfNid3pLEJkkpPAiADfvU+uQKbigI3XTfQ4qQ0I6MnAUVZrLPM22QhCydZJA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.2b02d017.0_1583353162934_0.20788849188288294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-ripple":"0.14.0-canary.cbdfe453.0","@material/radio":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SWH4YfIMQjY3/cEj8Kaq4wD3zIgdkynZU3PigiksgTh13N0czNnLkj+GFOaSbJxeI51//zdnoYeBox2LYZ5Fdg==","shasum":"12f5d707d45538ba83bdfcff04b4b6d83e99ac02","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFNCRA9TVsSAnZWagAAiccP/0WBjSI66qa9mrG5gY9/\nvkLwYlZSUT0k8AEdttD2PTL/CxKqB0OdHWjl+Pjse6RGB/sxmpMOTzHQKPBq\nZoNu6gAALzjGYorU1OP1nGZ9MUQzRrMFo5U84BTepm1QAP57dCbCMRAbwA/d\naN/f9X22wP/Pv12xAvqG2+RoiNOgi3rRF56ixhrovOKTI/lb23840r0k+wFj\nw5KiCZyZFm92jzrmGWLkot31T8ITEzcTUpJt7+tB/xs0LIlm3Fyyuzac/WUl\naxmj8f0ebEvdGmJjdHHTg1zg82K6eTSZKPwo4LI/5lcsGtXmCRkPkV+QuvGp\n0ifPq+yvfb/rPV6fQGKF6oosQsPJDbyHdBJ+7vDahpgvPmbCrQvXU4YwvbNr\nL798fQGXTYk6n2dxhVE2/M2lIVeoNMyHY5Rytxguixt1Lwyx5mou9UAlRlZ2\nnei/xuEtRrovu+WD0I95CV4OUvE+9fG3NCgTTZuvLV63nca/RW8Zq+Y+co7p\nq54C3SkEIDXMOYUmTDPkk4pDFv9W89+LMbdF1KtFdkFQ8h7b93oN+eIH45m4\naSzTorA5Cr18of2M5/7NJP/9+upjhjrDgeK5ofmFQ9Wq+6z1ZOFyDH9E2HgT\nMZR7Y7Y7+oMiRMCgB8dlnzPq1AKP+anb8PLn3tfAC9FEg51aVTZ8SzwNuOmc\na40m\r\n=In96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApx21zaqD7fhCOCUO0mJCzm5S7xNKnBI2jKwg46KhOqAiBxfRk+XGJD9KHel9rcmwmV8QPf1y7BRedg+zbSOex/YQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.cbdfe453.0_1583358285091_0.008558807553748382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-ripple":"0.14.0-canary.02aa8a98.0","@material/radio":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JXrIiOe6MOQ2RLf0IuPKHwxudGGmWlycmLs9aRPIHnMhpZ1t/G5lO1ThZkx2TCsgQVVCqQ9QviNTYaA+Mzxa6Q==","shasum":"7da88d8ae76e0103aed5b05e918683a4a805ca05","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRxCRA9TVsSAnZWagAA+e4P/ApCitcNpE5zqA0ii7HQ\n6J4nxDgSq8m7/Jy6zC5YVfL7gP7x4ZuOCeU77o+29IvMk1OaLvp3JVmB+hU9\nNnEovmpIdr6qTBr+FLQ43hI+wDRZk8axvbjWp4UUalP4fiC9XYpL+uBQ5Bnk\nUIvRv0AafdGgY9tkelYW9RsACm+HW2t6ojPOs3001i050n+HMi00weGLYsER\nlT27cwzaBHNKyJ48KJk+//XYobW6YG8Uj7PxUcxveTcrt1P7by7pKfAsYrjG\n6mwpPoPiL9ZX2xbimGQURECkep7/EMYeYF3CtbgbVORF5kVNq0IkbD3L6Me+\nP6WNREnh0J69Dnc+gjdaoY7Y6e1qzEzQaV6jquZxdX1mAsW0prUrKZ72GcnW\nG8eoHJiMW7tDtEM6RjGeDqKYu8yyzFadNAe4K5aFPbJl6h8lw1OEYn8b6FZe\npDT23zttaV1/NfbY3N4mEScjkyStfi3uWV+oV1Tku7Ixr7aU/V5SHjgbi5bU\nT3auoQDwwCVM2vMipn2TqCo8aXjIaBxicgSfcbWq6RQJxPb70MBiMYA6F7Eu\nDJ28sWUPoHZGL4x1Nl7gqmlZMrEC7cec0k6y1KCbjPey96zmBNoZAMmXLU/4\nFCi6DsKYDGlk7+BOKyQCqKvpmWYTMgb6T5pLnuoRfvvi9npDW4cad3AmAgL1\nKiEj\r\n=dYv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwzdv62qSBHewbwDG5sA5lhZDggX7B3DxpAlNWyrCK9AIgArGQirYORTizswkicmTHDW2/f18o0HR/aU8RHjQ8iGI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.02aa8a98.0_1583535217278_0.6056917458776312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-ripple":"0.14.0-canary.7cd5aad6.0","@material/radio":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-euQpk0kAMrJg5ZVaTJPsX+oHJrU5B/NQhaKyAhdOIIOGEM6sogQBA0dDIp+jfwQfxj9rbYtT/iy8jZlEKv5JdA==","shasum":"728012c192d687362adde1999a8d68250dba143a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs82CRA9TVsSAnZWagAA6KUP/iTwzIhKq4QVbNJvUc9z\nYNmNhLaFZLBRtRATZ1lwBT/Hd4+K3MNsaNcNatIKW/o3rKqbkaAlUK3ngVal\nvbRJfGmtk3jRqcdJWYbptKzANARBHMk43+TpYtW8dDa4V2jhlA/BO6Ylhq9E\nwtVups9v3ENkLRGHej7XzeElYmAmS/GpaC1VFrVSjM4+MFvQQ2Z0s6vnO6eK\nRZMf1jUFoEnDcsKJ0IXchtK0+gm2OhD2OMPWvx5wHybvtSiw+iG2gDheXYCl\nWLOt9z2O0nsbZTdOf2n/F/ky4Q0Tsz2BNyFJKIA1xGdO4kxJBw0Ju2/sBiyM\noARYKbr0WZ3m99xFDY6R6VmvP82Mwh2AWpE1moPiXuro/lTLQNpcqU5A1chr\nvchqeNwRO3RzWc3d83aTyWY3NiMdlTsh0ixLeinOjXSfYFtW/ub7Kwoatp8O\n/zxydbcqrBbLzZoUI9g4WOhoGmcj1ivk5Xn4CHUpUXU6ydfb5E7F158/5Rm5\no3MRzuzLD7YkAmdKOmNAxsbO6OCe3h5vjWK3FiFzjsvvV1yULjpBhx2QsM/O\nPW1a1e4X3bulTwvCTngLCUS7oZ7Tuu4JJ1FlLmOC8SX15g/WeIuSBO1Q8ene\nHmm5bm6Pi99jwJ2ZOzIi4wVCvGvA9a3H/pD6zPxGQgfWPyWurn99tQoQNRhV\nbz/X\r\n=2BFh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBztoOVXMicjqOvlRisqlrlZDQ61ByGnZja8a+MPpIhSAiEAzUWaREOzuB0gL6ToGk7LBKtkagl6QRzFUKOapaA877U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.7cd5aad6.0_1583796022223_0.004836048355967737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-ripple":"0.14.0-canary.3a79dfa6.0","@material/radio":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hvQk/1yS+KHiFx5IArwlG7FR3nAxCnUE4K0WLG1sQrAp0AV2ELUwmsuWcQuCC+kNMqsriFhmmkD07Y0RDkoHig==","shasum":"d4acc50ed1d6cc7158e0c41d898b5afab3662ef9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHaCRA9TVsSAnZWagAAHwMP/Rco+DlQblAzyqgdE7jt\nc0r+dVeC0X4z1ajLpt0u5gsKCqz5agfDWL+ALpzJOeQikg30Zg/vWFqVHd7r\nJLH0RbfY6TrKV51PHNKgRrxKbe5SEzW6AYaxxbu+Ir34h5tiX1vjgex+diuW\nR+DUTIw4Fq3bXKZ+9CONQFCwQn0q3+cxJOvslo+Yk/LfiY274j9BbAjUKgn5\n5x9gc2zJFYgya8lNFT/1Lv5xMAqSPlUXiIBHeORMCz+tTKnFvXGa5W7sfJqW\nNfQHWNKDH0wBBSXsNaTTAE3VquhT7cCWb4KpVSgtXCtWnOkNOW4y2UIfzg2c\nAiDaYmFoMWEZLuega4wA6jlRHRoz/wyS+NRlvq+Lwp7qwoeWaRsfJg3UjaPC\nKwrxAP3pjMxpXMr4zIQW+2md4AeLBLZ3aawyGiUY13uhFgecBgFl4Ilvfe65\nRqvjQHcYxI08h88aQyf84I4jc/ekeXMJlxYJmBwCH6/3zXTeptQFt2kvFQlB\nXqP1t3xxl8hFpbwgZ9Q7uUOLitmuW/Zpbxw/VoxHeH0J17pR8gTrYMVasxBK\nJZIXWJYI/eldEOLqgVwTVLOTs67MJDbunJgeJhSeRlEYnNqCGxPVUizmH7Ho\nHStqcGjQ10r+ojdpkp9RL+mlHTYZoePZ7sfs/BCHBPM1/bm2Drg7uni9rGcb\nyUhD\r\n=QeAw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDkHlJQJH2Um2abV0rT9HRsNnJSZWhO9VeW+j1YQ0hjAiAbmXYm1r2gZIRODMr3OoiMQVC1dqiPcujOqgTDAMoRiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.3a79dfa6.0_1583808986647_0.4251919338645773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-ripple":"0.14.0-canary.22e0f5c9.0","@material/radio":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KyJuoENj6Tf7h5ZHNuweEBlWnYj4HHyEOkgwbBDpoBQwB0OBaC9o72gFEGhXgjZ+jmJZcbf7D/O0qEbAUTo5yA==","shasum":"55a7132fd000071d867031ff7da6eaf738a723a9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLKCRA9TVsSAnZWagAAGAIP/ilcK1fLUg9cnSwW5k0J\nKFoYkQPQptrmKNEHnUVvYStO2w7BRnTT7mVsFe9PiOYJA/UqSDTAgEo3y4si\nsxx31H9As9C9l01CLQpkUeqVRQ3qjUtiZM60gYiYu5zgQQrpV82/iDnHfZ93\naPzj79GWswDPLmmndQvi08xGXK52MnhKUOxzh3ulauF7un5WqUZqywVQIwBM\nSK95sVS11OI5AVlao9JGiqEN/pSRAnjzMvNik/WopSkbOu9ntSAFnf8PCGMT\nebIwo56RzQbOX//SugggblVuJnWMwNnrpfRddXJhhHjExiwUQYlWV2byr5eL\nWSnjTpaVbW+OyCTyN74MawWK2zJ2qC4uhliwFe4q5yYZBq3pxBVmatiDpQFn\nbxFO29kB2GUGjDzTDrSI55mmC3QE4uCB3kMm68w8jyWYNfw1UCJ3r88k5pMX\nQsQYwl/3FoehpX5NxXh3FSOsyFGy24xM+HiTudPYoGwnXFDnD5NdwPVvEzLf\ndzG6oX5bDCGg6Dp7NHQjD+QIxtvLFghBmlfBVNwq6iZGQDE9QrfBzZvcBKJc\nVeWygmqOJSjpBjKegI1nVEQmkEUtB5dirh2qgVh8W5Zz4iy5I34JbmguGMNy\nP6riGmkAfRy4FZydCfoFMIv6owzrg/2fVBzc53VUfJc3FEHPlJGhx/vJzQrr\npKzz\r\n=OXMN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7ev/D+kZZ1wXQ8PbjHJwPol4JaBssb4hYKTXJ69ui4wIhALUc7Fstht1gMFv0689mZmGPW6z1sJpK3+fsa6r4Wtp4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.22e0f5c9.0_1583809225755_0.2406326971367041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-ripple":"0.14.0-canary.f23a1d1b.0","@material/radio":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4Y/OPQpXvM2u8JXA+DR4Ke6MKzfa2m2lxJof5zY9f2/OY/9+grudWbaV1Pq9ukAJdxw4K8nDfWUKxum9dL4+jA==","shasum":"0fabe981792c1a5bfc3d54c1a92d0093c0febb0d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8MCRA9TVsSAnZWagAAuF4P/3MzzU1VZr2hE0u+dZp2\nDLJp0F4b5pYmGFoalAaG+pq5QlwzkKYFjE6mBT4mQ1v665fhdCG3tpYLC8g7\nzUTJdMGCVkrcqJR8CKKXU/lIQPHMVyBt0vWM8DXAYhfosASuDzgVQcQJtzuX\nlDkCujSu/CU1mjByQodgu7k/tIrpnUH1ZW04Kq5d2g4e3A6FPKweg+ztq2np\nKsC5cewvFq7UbD/LPwlId9zU/W/WRkFe+ArHj4nfqP+b1QpTK2NXvp/o2whf\n81pcKzrBPq6yBK7ixbkg8qPZxVYP9YH7SB/8yXMrauLx9e3AO00PZjcD8B1O\nYVEY8ce6md9hQx9CiXHSzrzyWmJJz4oBAjG0UGfgGZnRqYEAyeEhFwO5kfgg\nkj+aOUcdDyALBKYwJwEIrKpDqNzfexqiVpr5oqNAT0DnDvj+ksbS96eQPyOD\nt44760o9VCItj/WoKSU3a4vD4K/cRpBnakYz8U68r1OqriOYv8F7b2FL23/z\n1o/2T1I3yLfxl9MQvXsAh2PYjkKwa9T6GVRvcCdsbNc9CLx8hmId/V22MjFl\n2WRsqti9uslZM1JnGaQeQ7596129JwQ52iow101XYJwie/nj451illyDvgtZ\nxT+KDbg2IF/q7N3tTo7xMUckfKqzfXcKONOeIDqZldmsTUKuhn2vSSGCn0QW\npCha\r\n=x6DX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+MDNOJ5EebV/PwNH5xhGRIrc/rIxgkZhKzywdoFAaPwIgP0taui2qlR1/muqm3+E21e0b5cvrTc72UqrardafwZU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.f23a1d1b.0_1583873803666_0.11894337214423478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-ripple":"0.14.0-canary.34b2d69a.0","@material/radio":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-s1AkzYZ5fQKs8HgITxdapDH+SpybtWmQxATnjzo8HUTH0eyuJI9K1PCJlgWVfCuZU2rnj+i17DllG7adYLRwgA==","shasum":"3227620bf4203017bc1600bedb98561566c1483e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANQCRA9TVsSAnZWagAAPZoP/Rt6GNq0zEhIFfqsNlgr\nR6NGRr4BSGhuSxvps0o2wzt47MPqROUmD6Zk9Cr6PBpXTsouEpsMs3001HMP\ne2WP4ZFwzQf+rNOO5zSi1hwo3Wil6tHWzOxhBKv79r0bZe9U0WkNiW400+YZ\nSTEdJVtXVjEkC+rSa8kL4Eh+ZvWxKVGMH4SS+RlRpJzO0WuXhRnGeuKaV6LR\n3oHN6STsyor+qjL5kk5tyPzKmasEOWWTj4ff7uW9K0qONa4061Gw434DBlDR\nAH2D7LVKfNA8St5/qzM3d74ZIdCK1QhpP1vTXOb4bd50fO1QDmIw6AtVKJpn\nK7NxGf+mEjmbRbYLykVP6xEwDz+Mw1odnr46pnKLbxcisrRqv/jriNUxZrHe\n2tFijQPuZomAIvDxIQ6ukSJszGCB/4NSf0lWkW43t66+0DDPBSmHL6RturLQ\niqHaGBV9gKRMacpxuJ7hDBMMZxlIb1bf0+Xypkyi27/ybEzpSCBqIySD54AX\nWrMasUi7T7LjAc8qpXKwywC6vOlYIzP5j0TJuPzgPLbgu5KbIRGxyV2hfk7y\nF2ztj3kqR6iIsnwa5c2AcO/MWQbzcUg94UrKVpI3tPmYdpYp2EWZ+oByrQAk\n6fHqoZNZWbtI11V/ieF13f1Qd7feI1BW1v6thsqUum8UIUfjtkpVUXv/1Z3W\nQz8m\r\n=bIKf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk1kaijjePGVy1FFRM6TJh6K1rmFMrP21osndOta29ygIgImz0+TmkdFE8mwNz/pdHP8rwyNnPrTrQAy9mlgxilp4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.34b2d69a.0_1583874896062_0.033431144641126176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-ripple":"0.14.0-canary.dc04abe1.0","@material/radio":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RY+MwmQ8JQjJyHSPgCsXzJtq1y2E50Drj9n//hDqIfLzOSrOwAdhnDgzD3h1v1BlMvGGsysBaa6AoURjsknCHg==","shasum":"c497b37ab994356db623ba19ab23aa9f6c15fbe9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA51CRA9TVsSAnZWagAA5Y8P/R9O5alpsObTTjmNlGtV\n4Yrft60hBQpadP1BvO3pJa7mEW8yijq85pNxTrFGyrE3XlLzPZZwALizLyUX\nCxsDKfAWg4ePMFlxJvyIEmBGPxLNLVoKY4RYEkN3aC4tpCZXXW6gyuTbHW6W\nQ+AAv4aitGIyVQMHU+fwbQo92Ma93pnDkMEh1bjmZzfnl9kiFNYnfRnk4gqf\nEW+lMMzCgCzB+74x2w82FGgKXYCUHBEs5MtJGKb3yXi5V38+S6WoS+o6TG2v\nnKWHbgmIRyYpcEwbemTtuikf0cm/FKVsTBpWY31x5KUVA38y+jvSCKiR52Z9\ni2TSXd0uAm+uz7nE/UhWcbfzDSsoLsdeBI2l43qSpoQ0gXdSXOpjjVjvJ7SR\nimVyCYZxfamgHrFznuYW+wNqWWpQBCU4iRmPmLFl75+5uK900ztkKvs1H+ft\nzXMI+zjz409KzorhWpPX3yp2TsMK9XKOfLGFAM6l2Tn23itOZw9ud11tlIps\n1aaVL5lgkgYqttSLlg1hPdKBLAP5uVbwepjYOb1dTMNw53xcdLId+wMANgTq\n3hCENCnCn3J/G7FM5Tnaj8NAl5jOMA8bA2v+tvbaIhLY0eRrJP0kYgxFMQEr\nMN1C9u3qYgAvoURPwwjtjCbIr0+dyCSxCK74Wl9x3mKVAy1F/zp8jUSV9OUp\n57RI\r\n=riSt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdIBUdAcRXvisUa1wri47Ua+1gu0oyqsW9Q2mCCAke3AiBXRGYi0RjLylkHtoHscMYFwrfGEPaSoFHNz/8D3Jvfeg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.dc04abe1.0_1583877749323_0.1497871026326807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-ripple":"0.14.0-canary.04ccbc88.0","@material/radio":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rjyHpfnAlrP7N/yE84RhPIQpiOpHgrBDVygLwRz0Xh8e5ob7UCcr88qHebb5ThOHQ06byynfBdQFbVJqCxsBbQ==","shasum":"f6708dd6509982b1139c1006d9a5126f0d0928b9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDI4CRA9TVsSAnZWagAAV/kP/ioOaluHBczpOeNC/TU6\nMVhAunslpswg+0JOvssutczbR1tyMUjXEALCosJf8co3kphK3bNPztk4v6OF\n81xoTldoZEWlVyd8SdldSa8WjRa7RHvP8Zr2SWbTJAtRsm0T0hJdtoONPcIR\nMUI7dndbGscWj0cejEv3obH9Xm6ORycuTchQA1HkHfcRxVJiN0n7L+6JJLaU\nuN84Mpp+Z5vU5iTDZHqNvb0NhXWczoP/tQJ/rP8QbUQ/qnbMQSojB9HUuOc4\n6tffYZrgEBnHa6dz3vhYiwkVBCNrl8ZyKa4c3h8nINo8m2xmwfihAfu70YWt\nJM3L9x8WuQW+Nji9rlRrbelMsRWh7zwa9a51jKQaTQxBZHd3Du9kDu4vOfT6\nWYMw3GEZtgoatpTEviDg0SuirMUz7OEJCAdbC/tRGDqZfe7TdhxFnZIF3b5J\n8B7RqtkzBrWXi5bpOFerJkHF+DXP0ldvE3nEg1xxvTIS3GpKn+DXR/DoMmlA\ngPKjGAbwKKZtWS7VI12vnPsCW5Jm4BQIJbmkqL+7v6l6PgUXKaXhdmyOqNkN\niSdXtn3FylDnHNHMu9f7Z6hCo70QaTJ16S0OAMjQnYfZEmoCnWlIV3jvnvnP\nFtKE/LeyL4RK9fP21XEdosxRkUajwAsdAgU/8WOQ05CRQa+wIbCNztDIXVE5\nhKKK\r\n=BOfn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBPVPfhI6E19RlrlK2QNIYoE9rI2W5R77J3bEYixjCxAiEA1uBZsey+UX8Eq3Wea9criCUDB2UChh7MkZ6FgkD6bHo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.04ccbc88.0_1583886904346_0.2165264481929401"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-ripple":"0.14.0-canary.55338c25.0","@material/radio":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9uyeIXq0qhXnYW1bcii5JWak1l+DdkNm68RfFVLEc1MxC29j6vUUjexjJkXK537o2Vrrqn18wFZlWtAZC1sCRA==","shasum":"56cf74a5a2ef2fb328c02e9560e1e63133ce95e3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXKCRA9TVsSAnZWagAAP10P/3GK0/s0qPVZFmUwnf2B\nfb3qYRW2GUjJYEHGpsa2rRhg5rJ5efwvFwd20H055HPF6buf26aMgLT1ORxd\nssD+WKQUoOst3qdgJbyXe+6hVhArmKgxsfWk4bWZvqea8d1wofdQZgN27O4H\nElVeBWaFVVAn7G+GBPJXUIy44MjBqAI0T/7ubdt6iy2TuO1tiqf6WgZ2AvPE\nBmi6Ys5/mg08hQ7eP4C74Qme59BZkOPb3Sy4DVsaBGNfei+Mh6qL5xJMsNhy\nWrteSaEXhuTOrN1wB58pAOr9OUexLvrznkpxd7X2E8vGjRhjxhm6Q3h0Yuff\nd5Re/g+8OI9Qs0hREh+OroD7rfea/V4F1tYJNrTNo3vDGSM7aoYBG9ZeObUG\nM5QO0KakYWmp0gUmjraxvwY7YE9zf3yNNRC1f3b1CBUPDU+6HtoZoF4vjU32\nZmb2BbM/KU4bfSDalmuU8nbU4CojdvP9CPfXy5jnBGrkREReHCZiq0C2U0Gv\nPo7YlX5Mp3aAEmDGUQyv7/GDaLQewlzxYKqw2BP/PU4cLbtOd7dWpjxc0j2n\nuSTnBon8Y5woEq/jo+qlXkY8eVhbOiBz4eaS0c+tTeNrvcRNeGTKVFQN5uaE\nH9XTgG1UmTyixNynhQRajqlCVBFrVuG7HYKJGvg4BrD7SXT0f6wkBt3OTqyz\nJzG0\r\n=INAU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxjZbSzplGypfU2hxz8Q+DTIbJ2dojeW6ixEC9IAYYdQIhAJfB4Xi4Ky7h21Pw328nII+plXktUKnNBKoo15/6l1ym"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.55338c25.0_1583908298333_0.1748111496469129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-ripple":"0.14.0-canary.b7e388f3.0","@material/radio":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RgmCHz+g10Zbm+CFDzfDIFYwZQQnUajmezG5oDWYb/vfbBJtM3/cL/LP5yxequQNNhQYJV0YvlkZ/VoTgYixyA==","shasum":"ab950775e315fb46f180c6bc7751ab93ba36aea3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUftCRA9TVsSAnZWagAAfzQP+QHExef77pl75YHvz4ZP\nA0WTP4CkEMM1wEn+iQZAa0kjE5AKt9TW1LuZrW+iB+lzlpAOekEGC0Bkh0eq\nJkm0FphceF/MC0W9mTW7SUMuWT1SDaqMidEmq3qWgSYCgGpw0+5lxurqfbUl\nWHt3DFPKwC5QoXPNkUJSZ/6ax0MgVB546xgQ59P4ptAfKyzYD/6DHsoQe1lY\n+LNlvT0Jgf74qfYI+hlr3CGNCXFFRV6kk7PsRnoCQSoZjB4G5yHA5vclbtW+\nQHrpHQp7Q7MwjTvnsLjDS7OEgGKUdQcA91LMrQN95dBtntZ2PMj/3IIMILPx\nscwKVoPqk+u+yEaweH9LmWwqe/KfJe7j58y2lJNiNzryscTCWp9+gQSCk5dl\nms85xnir1VfLC0J2XrWlztKXA0V48mg8WZVKMHe8upTQALJ8mVeEWN51VSro\nh7uwHypGWEo/9a8ngOLdkD6hKbXy6VpSweDnEjznwXlQhInmNJ9ANu7GuBlY\nU0TvHfO4MPdqgvz9sAtGJWYVxMLpaQdPXrIyX+xajHdcq/EwPQrAbf8G8CDw\n6/lJNZd9JxsKCN9wmuZ5Q5OXZ8L/T1eibfbnnNQiouM+VtWBdeOqnw33WhHL\n48gnI6nHm6HgSMH3dC6q/Ml0FYf8/0LXgou+8tlGDAcES9godP3rRhQEKyKE\nChv8\r\n=b8BH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZzX3+2uDbRdPO8VRkelpRiHmKCVCm7DNQmzkL2TbEXAIhAO8DdYMc3cUQ6mTDhbkUz5nEX0vjcsOmPSO80M5qz+F7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.b7e388f3.0_1583957997445_0.6703454997880063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-ripple":"0.14.0-canary.b3211481.0","@material/radio":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LEdojgixFInEis2iUFe6Ldtf8wQrr+AYr5gLO7ooYe64mHBLx0XPMfDZ+tBlY2UJ56HlXNlyzNJiWLjP/BWPTA==","shasum":"1ad380054c672ccea7571587f90ba3cd6401076c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjmCRA9TVsSAnZWagAAnEYP/2nhnmvMp5exli7QPVeO\n/7tuvmQAZvs6Hf4+ySITnJdtBP6wwQwE5KUKTG9Dm74EDlsPQxSOyG1ew9dR\nrgK6rhVrl3jokQAdJW4K6HSgOPOXeJ/N6gs70AXKzUpco2HBin6RF03W6Q7w\nyOl6kly7WugAkimkBBohwqK6K/IamETLNrhRud7e5YkcemYnoLq/ep64+r0f\n1RMtMsAlcO+TAXkHIso8+N3nPOb684pipI0gKqFdE/Ax8Pne0bL4Dm/vt1bH\nHPYqUWG/IIEKUcCqP0ukA80yFGJXoiBtPf9orA/DE5FBU3DW3+WalyS3n+gu\nPQ/rn3To6Fa7RB1YNWnVXiJqECjMgDhHpmzxL+M2q8q2/wg5lMzEhpzRrdFT\n+/1YeANceaM1dlroWjW3Ix6U9VU09nre4k5qPliQ2mfDNJI4jzK5OI12xxp9\nbbwcwu9nvLK1PdsEqQkN8s7mm9IwwJSHNeuNZ4wZ8k688cs5Gqn3OSvKA9nB\nXu9XW6ptuYQ6H52nSqcxUZO4JMiG8CI4qQMHrWcoTjIYDjbUgd/CcmvOdmFF\nFJgfVKG9SrUzyzBDrvCvjcd9mFe1nlodMqmg33jJfiTJS1QkIEhdVbiHmkBp\n1tTScPOcu5WxJYu++sJjmerKpCYXjrWhZKqADW8p0vSlofNDFYcelkF6F+5U\n/73e\r\n=eogH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4kNCJnIilucmmRiZueTYFO6BhM3tQfL2KwXphyV5wGAiAhtl3JpldeGMcmiYqv/osCaaX72bjGAFQmS1oSSA+xsw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.b3211481.0_1583958246047_0.5245708757460585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-ripple":"0.14.0-canary.0b5c7f23.0","@material/radio":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5B5hkhtPGqcFjs6sHLVlpy9/bhhj3ciNHctJHEUArpKtqe9ZuOXI1X5aBazFsQwuTpCboixJb1qvYSAPXKwLcQ==","shasum":"e8f5ea828aee95dc2c2d7f97218aaebd1f0e3658","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV36CRA9TVsSAnZWagAAgOIP/iOJ8QkpQL0NZRxtCq+D\nFK5WkbvTM4vgrzdhHLb9IaiY6829zVGYe2lKo3BgNcFCzrBHI4mKtBS+ClO5\nG6JoNOR/KkgOUa4Pqq3Abxr/8JjBvu/QwYz1MJ0HG2WCncm1DJtnN6vBTIvP\n7FjDBhAW26ZPNPnEJUc+RaMbZAGzKTkaWFjoMRJQ4k8uEtlQk7eGQGK9Cb7n\nTzuV9F1Pst0tlAZwzr8OrsQxyQsIPx9NL9sOclKrqWtHYTPwEceHokK3qARu\ndNuEjWiLpALaPDxhuxsmFdhAatL8lYBf/S+nOGzEZHYdYn2Ir78BclsvTP81\nK/w9Ep8FYnwgM+6pNjQTMa0etXlDYeTX4/MgZI/PF4Y79TPlBWq2U1YkPT6y\nw3qCLs0zGzhhzCzMFf4Y9/S/ph5WNB7ZiBokKjVxp9EnNVV2nJX7WE1TGKbv\nt8VtNe0RbQ61ZIHfB3vc5mI+1lRsAigjg1fXo6shGXzwbpBEkjsO0MocbXGT\nZNOSNwjOQ6ytUuOaZcLfRg7ejq1AvlY0TyP37XAlrRxzdqSiqjMy2o60LC+O\nlksCJ2EYF4GgUoCpPkDorkZoJQQDUzeOIfCyAzEr/RHqbfT627PUBFBTOXVb\n3UJELtRjhJ6aQ1ZvexHzKm2TjdJYUPVfN0x2DbItr/xDaFk/RyUho+Vte8/e\nlOjw\r\n=eEYg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxhvPW2VnCGNooz8SVDQT59fVKEesF+dh6r/djw1XzRAiBDX4AXVEmtvJYLKX7qlI2XmkQ02QkjGh8ylp3pu/p3rA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.0b5c7f23.0_1583963641744_0.4756686397893375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-ripple":"0.14.0-canary.6c0f0b27.0","@material/radio":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QunFWgb4xnd8AM3lnSXDuX4gMV1TGPg+lhI0ec0mUgyKRu6a8I06ESggYJ5uRk3HgoBWte0lS3z/33sFYPKH+w==","shasum":"e1c0a6a256a2b311b076c3fb5cfbd6194d8f397f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbiCRA9TVsSAnZWagAAY7cP/2mbRzrtAlMQjAw88WbI\nBH2mfkTdPLx2CRn33Cq3U2ev7dVVR2JAovJcrMmBX6N6cxBzG/60BuDWE7Nh\ntvlZtWbWfJbMViA2bbL3ROX5g7P+oNDHnBjuQO4YmJDlND/UHOQMtMZnBAcV\nTllt/di4J2hq20lVP/fDXI+B7issVWRolfQGs4eC7Pf24nTa2zxoJXMblUZL\nqu2hUPgOsHPrb1W4C7s5HTC0Q2P/PM3wFXtAOwgWmZBcgy6ZTiT672jvezDU\nGMWTJIz1V/vx6JQiceHdEEF7UxyxcGduxmFLZD4LUEvw2jwZd+08Mxn63c5X\nxKyYARRSb3FC78Xw465Og2qjIssj6N9S2QluviG/lL5xg5yyvTtvLSUYXu/K\niEqZDx03TJxRF8cADrNT9/xAP57Ap9IbO5Zq+HgoDTnNPV2TtBCEITBZClQB\ndMM7pa1APoccnz9NwtCXwh/LnusxUUJwRJAyAiUPGF7liS85q/Nj5TpISaTT\nmwDKkkWIhQCLb3wVxC1f1frUW2b/64dMZKV7gO/B/nzIgmzDbSbAbXSYI1S/\nOvCFuTduR1iLNnXJk11IpcAhC4Ss6FMZOfyTKfne8tx6itrxlTQKKr1qNeeu\nmq+uWEN0rsl/LRgECFjwcLMJ4+VgDFw4ISryKGJ8GSFDzi36Dl14e3x5x5vK\n/ica\r\n=uY9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFDwoK3YB746X1+dCPXKJ9PI1PUqZGEIM+K2Vc00skegIgQg/adX7nHrRdowlKi8EKj6e1nmEZkyuEZp4wfIcRPBk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.6c0f0b27.0_1584047842480_0.6513478548112221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-ripple":"0.14.0-canary.b6c53425.0","@material/radio":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iiWSIagXfWsyv3CIfbG0GLUH70GEhMPHZa5Jnx/cXvVRjyw+Of11QYRqBx9x66oaYUTGSim4JS56bUm13pF7kw==","shasum":"d03069f59667ee981e3fd40a0398b6c70ae41aeb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":96318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sCCRA9TVsSAnZWagAADAkP/15wtqAvlE3aHelI1uyq\n+ZFwDsZRapzpl3yIoyDS9VAhDnddvoPkbhrYdR38aUzL+/KtKCow/arSzQlf\nvmLrCyV2R/VvfSPfLVHhOQDEOzgA1Fg37fqbo/7VdGCB2tYWZO+nRoN6gITF\n8Eqo+YgV9Eo7iJSuzN45y9/jQE6i1XaIQH19hpVzN2/4zaDHQ/n4Y6a6CTwN\nXaeCBi05WbyF7s1o2av70TriUuOiMZnTAcbEsdATm9zJrPcZkG/cCYxWeguz\nIauuChbRs9JXq/VcqbnAUUBiezvJrbaejS28aot1UxdWOjZI9ZvAOgyi3M03\nFOiWxyAB49SHYsXoGri1jbrt+5OhxvdXTar0FEmry622MydaImYxI5k7G18h\n6vQCMPXxBl77M2TH3j2sm1/JAD00GAOjdoHY33OImKcgsfeJ+qy1McGx0uEc\nJBkoTIFCzwMwlMjltzisMLXBa1k9eUZJU4KA4Bnb8thxZCgv9fSr+EPE6RSe\n2Mx3zw1b3sWd6+TLI0ILYsf2sTryAH1Vsno+F8g46sAICK6cAn6U/JyzU95O\nNkJY8ooUeZQA+yBX4faw03eIh1MxRRiBqLcl9C4vKB5/epthUnrygZj7fKJh\nRtdZEHJWWXGuH6Ai0KJTr960YW/BqS4DI6RYaLyI4cDlORFBfu5jSQmjWr03\nVCDW\r\n=mnPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeoRSwVxO4lEp9KVughPWIf2TrPxySQLHcWI1o1N4zaAIgRQKWGDKwO4746y0XEULOQezbW0IZR7D9CQWYshs5Ab8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.b6c53425.0_1584118530117_0.02141862724293575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-ripple":"0.14.0-canary.306cabed.0","@material/radio":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PAqe5rYZl1dYEKjzpiq/Ys0EuZXU1KFGwnNI6f2L5QyXW0aGP/neeN0wiIj68PwRn9YPVZcGbHejxBK+xJ5kiQ==","shasum":"d2dce66606b649cd75b30885dc7ef608f34d7229","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6CCRA9TVsSAnZWagAA6k0P/A1XT0S1HH94t24PnzXD\n7X372UV9mRymPvLLkXSjd5SWqV8YmoMMctWFvkT4ilfWutihrVw/19Ws2vOa\nxhBwRjsZRepqvev+FsiAJe7zNwlFX+E7XoOjqTNXqqLYBz/Bhr+fLjM6YQO2\nbloBCFStJ61NR4ssV7AKdthaKkRWWd0KSznE2kc2kAaSzlBI8f5QBcHpx12m\nrq10GYUkPV3HZttXQXOWOhAK5l8ZMXQCpTCza0LEB394OAPr8gLY/yMoQmVe\n0NmFSWZ/HRkPE46p97W6GMRszIO1vn6eVf3zJX7ycFeV6/6ej9UgaafC9E70\ntwPBKSXx54RM6PSlTCujbiOUSSkJHwYpsZgr8pM4aIRBRYy02vX3xy1D+3Pi\n0kPVzzgWUhmObeL+TrKfmGI/23o0uF4ht/h/+8fa++v3V8dvx3hT61L2Hzhs\n1GeX448y0ndKf3qQMwfYABydwCBEgy2jMY4PfaS0UQru8iie/CoMP5f6EIc2\nmilznbE1PVDgOdVWxXA6FCCW4eMXH+ek95CRjRiVsGFn6tuOTLCPDLWcmTat\nYOi2pHrZi2mCukTmxtNRtHV4hiMc2aN6eSx4hnlt6GjQTRH8cvuzUbwyW41P\nNutwtazfc4R3MSt5htKbUysfXG4HyYp/SsMg7+aCdqPNfuV2KGmthNpxyZ9M\n6ChX\r\n=qAn+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6dzqqQx1MzhJNOHPEzRNnv1FLOXx3FthBlFDuxnw4YAiEAsVTUakB1XOPhV7QJqG1WKNLuZRJvYsWGbtxO7fRK2GY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.306cabed.0_1584479873816_0.30029904252153594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-ripple":"0.14.0-canary.4e250cbc.0","@material/radio":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5SLPtqlKFhiVQc6WXRRn69ACXVkEohOQtevaj3uo8Z+z2y5BmoZMuTpGKu1zHfFRaCfCNunYiRK0V555E4bTWw==","shasum":"635a5a808bb1d633591315fed0c68653a6c8ccd4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/xCRA9TVsSAnZWagAAfc0P/RgFhlbyNzzGA5u6c26n\nk9HsxybSEp1HeMmNjFpc9rIuwPZaBYJwHvk7Gy4P2SgpquCXQO0Mbf4wJkT1\nR/vvnEFvW98vUwIj073geERro6b+aNE+/pQ9EmmyzzEpywchQ17cv58flZG+\nqgnrq9WKkOruPVBRPnQBL29S+D6ga6fjv54wDQdJvqZpr+w4I+p7E9ww4Cal\nHFGVfgiQS6Ue2tY+xb1FU01TMzpU7zXsT5BmFZfNLPC2J3bzSgDf2zPgl6Ft\n9pZa5DA0P6osl5984QFLflCG19hqpqGY3N0ciqrrVOWp5WzH17jvmsjRLU26\nH5Uiv+I9IuYcNXjS9OVI6sotX78YdQs4VgRt6oM3C6Zv3qUd3KhNowxURbkC\nGImdt/iDQClGFChsaPNe7HWjne5xOWc07tSZAt492tyOJGAQNqzjJz54NPsJ\nCtwsyXoKETSPoR8byLr4e4biwsD7v5eqqNcjYWzx15VXjycO0DNPMrfcRzEq\nEP2IHWVcbCDADtTwssJBpImKbbeOBDDEL4wF2v2YciPTUb26iVPJth6VHEWk\nTjf8Qun1zqZ7bjBMN2/lHnQIkWcqYN52+lgwLu3xBPIoFklc7zgsRhKpq7rc\nXOCt4b+Aqme3fvx+/LYYyCJ47Qo2//ALjfJjGZGuDRuVQa0Sa5pjSPCX7UAt\nE2bF\r\n=I+C0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIED5LKVOJ3aS6ZKJKkLStkzhoJhLUxaMmE7692c1ZiukAiASQwoV9RmebvSCqtAHEz+HnbOG8CIhS6WQ+WGDqurQmQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.4e250cbc.0_1584480240663_0.31088367963634234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-ripple":"0.14.0-canary.ff82d9ec.0","@material/radio":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Jy9CP4ucieUolUKDd8M0aQZsGDAHfQ1Ogl0zyExodPhzQN6OTcbWxSvRKHV0oLwbbJNUmP+bmbGLLDdXJcyS/g==","shasum":"22e558982191a00995c17e0d61ee2a82f3a2b402","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZHCRA9TVsSAnZWagAAFJ0P/juSNpHNLOQ2NRJ73BeG\nNYcPtnc6HB1AJIjlCLZ99QLPcv3v79X9TKgtJ/gvXmJqQMR2MZSILcd33wxV\nLp8fJHLEToX766+GuZRecrUIj0u2aEeghT/MfielDxN0GPSoOiEBl6pvobsK\nQhhQRKxJIjSf2vKUBfhR85ibHN4EuXOzF1waRYIwaSwrr8B3TH9kYmjr8B0W\nTdc6IGbrcJiD6YRVc8qGonoUNIu3JJWXLwogKwn0IjvSd6+fLe6eDYJfwq+j\nJd4EKD3xmf9GwcUQQPTRDRWPSm7udBGE3lpCR3VzcwJIy4rsJCSaEm0O9sku\nQU2NWyLoDjpCHD4CX2R92gS/POqJhPFO1g0LroA0TZeLOdx/BD6hqV9drZNk\neg5ggtHtrY7kPvTHixDndLePLIdycm6dq5wMBAjMVm/SsrVN2bA0k4WADLYH\nJRoro42q7CNyMKJ4PkyxWCS7dnmA6Oa5H6Aff4F9PonwVTOIIVj46ThWTf+5\nofWVZ/ROiDKQ8B2JY5FdaN1QvuXzmFF1LssQk6YAxgp8j/j34kUstKUziWaG\nyDm8vmPa2i/E16blOAp2XihgP80jWfFpzMjCI2by5FMVz9j1Ruk7yo20Hk82\nlvVUnulpcaCfiXe7AsgxLPA/XB931A9JJ14uLqwVl1jt2ktIxfC0zMoMXg+X\ne08+\r\n=rfXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCru9DKHFa0bBxOFLusuBHmBVLR/ryAtFnFUL5t56ZRwQIgVNxZJIdUi/1v6QTmvUv8aNdsn2iCDFgF6WmRghaIgQE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.ff82d9ec.0_1584555590887_0.8675160009984311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-ripple":"0.14.0-canary.f50f48ef.0","@material/radio":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-b25545p3AE0iLF3UAD8ldnx9pW38R3dBf/G0WtGrP+YO9VouHR3nJBm2I2+/PPaQ4SaFfce0cjm7/arQqumQLQ==","shasum":"62bbeed51740093af580f993c3852decf1fc1f56","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AjCRA9TVsSAnZWagAAkOIQAI2/y5Kd50gYnTpdaTgn\no0Gio507twBbYLI+OK7Q0pBJnm6mWNUNuMXZE7H6fQ/RvVkCk5boxL6vFRBK\nb+Ln2uS4sJftzK2P9QEaeY6vpTmSX/jIX1uTg+6/UnJoW+op2kqgwODLGrqU\nerQmnvZIaPKjUIs+7cfSUDSOyi/uj+QgD27jYxmxHJgPqpviTcC+jABBJj7V\nmsU5XJOKs/5eidH1ltiJIxSOCM9bMxMRyBZIy5abDtXSm725O34Sf5CQQLXK\n4XIbcHep7wIIySU7jlSA94khXAzda0feG2BF2FIhJd1W5IMsCAJG14qodtgf\nIg31Qh1L+F522WCmdy4fzrQ1GJE53OP6N1VOTnyHSdI29p7EWBBKj6eIX4Zq\nO4uDsjmIl4HKa6D8GN2JCyTRNhOsMawo5U1bZQQg1k2l54LOVuYv06jffAmP\nZLGYzHD1J4x4s0oZjbJz3huwWY7Gz+1WJ35Gf0yiJGaSu1SL5yM+MToxzJWw\n41u7dLPo7ZuzJYVZOMiMhzUzoWvVfkk372W/BZXsWEebskXWBGXlOIpYXoUR\nTi9MGCftpGeOpQo7wlOC4QwFIaqlqmLzj6izOYdOhpGksCHo0o2TnzHlkHy2\nbglx7NomxyqnymsfiPDMounKEAeuuHGKrspCiUAmeYBMvfkF7H/OnqA08AsA\n3B2t\r\n=r6FY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBUyMKCUCBWqTCU1nXeGMTyR6mr+nAWxB3L7k4BBSQYQIgL1YiUiobVBK0jpUQBHRqq2pyHIDa9rwfsxpVb/WM1Ds="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.f50f48ef.0_1584644131309_0.4976607648116451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-ripple":"0.14.0-canary.134cf877.0","@material/radio":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dDCpBJNoBlQ9HbEGYw3KPAzAt7u8jkNOljwVb5PNnHdgSZ0RmLxEItejttxuGc7QpxfJegM/KtgkK1njTPTUaQ==","shasum":"13e22b0ecb25bbf50e7df80d8e661ab7893d2128","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9h8CRA9TVsSAnZWagAAIO4P/3ajb/foQd3bWs8M0eBq\nSA5OYuB+EZ6NGRGF77mmZW3jt6+xMyW0saxEvnrvTrzt7RvYwzOBgeVhci+B\nfMvhyMeIrV9q4bUJMd/FBaN2U8XzFn3Rn8j7P0Cc47jgw3koulzLyDbTKMCd\nX58gla2e/DAGhunTjomxL7MRYoymDvW3pxFj+o0cMp4IwCod2JUNzPUDr/e0\nmmUviv0bxvyW48MUIilksWRCRLIKYua4xRMKHwexLNj+vyn6ZmGgsCPe1+qY\n+ZFmuWZlAxp4qbIk2YBprI/bzMdkJBdBkTUs3oJlz5Y9M1cwXwJOmlUT0olv\nZr0hdWAn8nI3C3FHro8JZ/A09rUQXn5kz7io7XTRhrordNZ6BXX38X/LJfef\nzDrqihuXoDQtGACc8872clJTK6J6EY2iUFk2MOIdfKK5ID80kz9mHlx9COdj\niNWterXnTBAJQaYgoQCLvpR15uAP0mIaKg7yrdLDtVDPCk8GthgX6hcbmCv/\nK6NJcBh5sh7krKL5r6GtuN0z7TRpOdDSkoMBym+VDc3MgL7UXlUwhLyP62UA\nZWkEqDrrBgV5VUiOLdyghpS8EGHSSIa07ASVzlEJJOBzW42OKt1sWjw4tWC7\nQbAUIEoRVCnduy9NYM9NaDBS+ITi8vsw0fPK9bFY6dTpnfR0cB91vMh5NJFo\nBvRw\r\n=ERhj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF7+5hpQ+3UIf/b+dbWA/jKQrTF4MK55ClI5JDF3F+mQIgIJy1meIf1lN0Voms0+NRmb78Se2O5fRowY1HgIUHD9M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.14.0-canary.134cf877.0_1584650363760_0.41432015457393145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.0","@material/mwc-ripple":"^0.14.0","@material/radio":"=6.0.0-canary.a88c8e4dc.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-radio@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-+/iMR6R0EevtX4qUCSXGUpNtEzZsnx37wWHv8goMJbzsN1FX3IwJ26PTnqFzvpNuJB91CRZytOkgmFbviuf68A==","shasum":"ef85887f180e2c1dee33604418f20c113323662b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.0.tgz","fileCount":16,"unpackedSize":96443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QKCRA9TVsSAnZWagAASy8P/1d8jQSvvi32rBY3orBa\nYWKKGOmsfo7poiLMb6/YBl+tLoGE0t2RDghAsSRfsMMvW3gznEjuUv3uVxBy\nqeRC2HJhJn7eVUXUmFhDLcU3KO48j11YsVxfu51MUSNH5hhIOq6LseL4gWxj\nP+cwMXVV8YDn3oabH/tMn4vHJpWnvW7lO5QLJpPUJleIcRlfaNyNwkWSoaGS\nqLEnqZs9TV5DfbeDNRckFjoSmm2gspB2G2RJiW0G83rFt/cF+IfUWK3izFwi\nCMtANHuWIFyVajMGGgHjEW7gE5N4/I+Y+4q0JALezcyzmoyRaotjv2yqqjzg\nWL9X+IqjBkhJS/7IHOISsNwWDBTK2EmMXOrQ+k5k1CHg3N2v4iXK0dD8q2OU\n9GDER+hO7JcA2YjfnKrzeRsd6zAaLme63UojToFEpYqEPVOAIpE1nZhS6eZa\nAPC9zsqDzpxBLN3iRJQTLu/gcEylipGFo+M8UIYJVl/8WQZh8CFM/7g8De0d\n/ZONhTpdpbBGr8TlCm3YX9bTneMMqSqT/Ha/fHzVL8hZpSN+c4F0IkUwlHNh\n+rD8hmShTIO3p15Kbc9eZv+3SCNSvJCLzU4ZPPBh723biP7uFJJxY4aTnt/r\nZue2lawhvEeW9hjMRo9fCeB8Nmoue1vjxYiqxciF2yeoHsMW/EMrt/HzjcTl\nWzMm\r\n=8kDQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWZEBZkRKcKXODiTaPU0ERz0+fIhata11j01U2JutK7wIgebFwarkkw54KhQrmgWnXx8R504PMxU6ZOSFYCN+utow="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.14.0_1584653321837_0.08738947498318095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-ripple":"0.15.0-canary.2c1a4913.0","@material/radio":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-C65+yWg0ixVFFS+ARuhc8tOyTe2WuOz6vrI5M31hzDanS7pD1Z/puwPipyKiXOES9VkqnMtCxaiK7gri9A6yeA==","shasum":"062a92d203a964429297a543920b82f1df76ecca","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mvCRA9TVsSAnZWagAAqGwP/0IB5lh0Gohc41+5zkrF\nrZWZiCBsaiDB7UOFRw/ja787s/X96+hL4Wd2BNHL1rGOc3y+2adpbGqgVYVB\nYz1Ex613MWz5DcpHU0wlZgsU5GfrbiwrzAgHkioGxR5RTxZB2cQbFzlexa69\nuLhSmy8MuXa+B2mmCW7ox+XFJIwGcOPINQzeQdfKy5bUzXt1FdbCldzf4yKI\n/DVQieuGIRRWTnAs8rQS1wCLM2GdErKh8X3vYq2BxodONvwZY+EzY43LF1rR\nWN+E9Y0F+GggP1DT7QSXrsLikeslTw358LiH99qcNCd0mI27F4N2Duzq66HN\nm8ghcxTru+6hYAGRsBx47ZZk42SIPTJoVnDU+4UGhmkcx/3Fn0TbZpjn8ZyE\ny9K4Hrr5VRhsJtxwIkynCUFNZ9R/lQwnqr3HqW8x8EKK5d3nCkqFcrGEu9u3\nZZCLyUU0iFQMB452/iB4qMrupRm1dc9We5XAyTUJdwGgEmXD5ZJqCPi7jTZN\nGCNb3AYjXtythOS7hT+njAPJoqr7Fhm2xnezjdHpkDi6sKcYTYSuSuGSX5a7\n3FaRijmCQ0EyyowwPD/mbcMMPSv8/eIGWLMT+9lLz1pM12XukKGdCV2wjUbv\n3Ofa3YlBw+zB64DRTQYQy9OXU935r7EA4JfBc2gEIdO3iQ69Rn5INcwHVK8w\nfYBI\r\n=z8pL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC79WKpFP5qp5tmiW/XtS7lnEcEoBuEZB7THhkceWW5rwIgZg5lLl8jvUGdtr0EaB1mKEaAFJhrWD8X65RP221dcOw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.2c1a4913.0_1584658862937_0.3374462175190269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-ripple":"0.15.0-canary.3a6e481a.0","@material/radio":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CjsoKjTAHItIe9Bi/zc29I+NnQJTYWfAKIO2RZRQ9tO30EmrAMVLqLfpk/Zbtv/d1aOk/GPC1gFkgCEXJcR3Bw==","shasum":"ddc1c2659f741c2de532cb70461dbd05117bd979","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfACRA9TVsSAnZWagAAolkP/2mx6M3Ym7mpYDzf8HWH\nkmShCtaAZ6FDez8Bs4ptxky4L+iN/YsoerS+6na6HpV1672HIweJI+0lofJw\n/egKih0MH3jT5dvHXvgv2Dcg1BU78hcnH+fvnUgsxWJbqj0sAxpOUhyo8aJo\nZfPLBwg1W/Ik4nMeMaBx+F4sMWPgLL71wazy53iTqPnIoXBicBcbSx9Iv8dP\nsPMSEaxPZtWLOqWgMgFO5gE6rKkPCKkdAUFb/vvHcG24dFnYFQ8rfrex0A2N\n6s0BHFg2NjxtXynwCTseJrmZ3s/d9fCDTKlgOZ+nMAHmhS2c28MiqayFHoN9\nPArL/uBh/jjGPpVAPVB85US7ubzUrNGnDtkhoantR+43QCXYI81XQWoaEOI9\nviFoXHYK9HWzoVq423qxqY3x43A3ilz2UHFYeJBBLoFA2QCHBrXf6UMlOqxU\nZs31h9JG/M1au688tDIhXk8DFoFbRDnX529ceQVcHHOFSS4AnW8QsYZJm+uL\nsZ6l7kRUIWVblP2NzXPtrXAEYoaiCPxCETipp6aM0DoMU3puCxfKJodSPF88\n1w4xBi21vBj6nZMO2Pe0AsOM58snZv/L2L6LVdAEZl2C8SZcZAkk23Mdnp+/\nak6g9/8FIxqQrXTU6eI01DVipzDkIj2OlIa9oMZFOeZ9tei1xnrG55Wl7nMO\nUM2g\r\n=wRA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJ6C3Y5H78YXh0/z3yuypw6ywSF3zD37tKj9w0JQdfZAiAPMYKOgYAJlXnoamaFBIozmR6JaFDfjJVJSLixjs4rfg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.3a6e481a.0_1584728000257_0.04462280670315644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-ripple":"0.15.0-canary.603d6eb3.0","@material/radio":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7xyd3MOVtpxsuPmJxsCYTdsSZWZkUmNiBhL8HdxWuKwa3YlVz3laCU83J5fPpBX/GtskE03S5IdOPd19g2em1g==","shasum":"3bfe3372462641a06413c43bbffdd9d7d13ee0c8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdDCRA9TVsSAnZWagAAxL0QAIMtpiyiaNGYkw9kuwej\nTkQ4SR7/p7UrWfwFPUr5naCcsDRN/dguV56wur8pa14g8TzELLEVdYctOYv5\nlPJQcu4zSQE0qYjNGvcdKfaeOPJRK6ypxT2vFI+z16lcMr85kKfypb0zaAow\nsICNx/xedurDhJMtbhf52BeZTqs7DK5QfYgKZWkduuz/oa/vG7j7C0rgagkF\nxTwjYKHe+DAHiSbZNookzj/wi6l3gvLyV4bDdKl5nTdHuw0W9rO77n8xW1Mh\njp0BN17n76V03MeRK5uTtHnb7ODM+kQ8pCaaZ0LJfW+kEVKsRvTJVxiyVdlt\nXlRub1rpgiYnXv4nJKuY1U9wt2EDSn2GgoeUxtFLLVVhWiZbY9nmsDkryxfC\nRQZDozRRiP0YX5eeZqy6w+OkUkE0/e/0NMX51Gfj6pBz+Fl4R+6rUHbHsKcT\nw5LR6LuD+owDmkOeq4aS2oynZY+/nkA/ftqwReu7d82G24OgmU88iyZvA7vR\nnIUK2A443tvW+xEKS3ADf69qemskQt0DX4PCjPLKGP7RAIvzO8EK8Z1gmw8P\nN59eYbsW6dW8nXaGSDpt7zxjmnh5h6aYbzX6GQWKfLeWvYKaneRKc+T1tYn3\n5FEvIVsmi70J+mJlqtMn5QtSpr/MGKmnTozgUax8N5lDeb3JXGxRh+tAfwFd\nUpp+\r\n=OdOB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUpV+il19jnjwwT+6Wsqk3H7p+o8SmTIFI/ZLF4Vb7OAiEA2TCSCx4dYXcK/KZc2vJoDH3Xhw1WPyi3WRrfSnZPqsE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.603d6eb3.0_1584740162668_0.6435331538352125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-ripple":"0.15.0-canary.05c6a93c.0","@material/radio":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JVH4Xq4o9NRxv1/FNKGuYi6MA4BUplCiTOQRgXTf7pa7maMig0kymg47f5rmAQpFVSweX/jNqKR5SCaIgEK3kw==","shasum":"d3d58261df1fa6b41cca195f6baadb2bcb4a7fc4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":96495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWVCRA9TVsSAnZWagAAk9EP/R/2jKxqxNfsAsGL4Pxr\ntG3K6LQDQSk6oEfaGmL2XvaWmU+XQYg66QhXUCYkSGEesioNK1phhOaOT+Dd\nOKVZG5hc/bX/eWBPR2XfoZN2LFhDOwfxUXZWgrxcXX6Q6hmYbx4nFCshNVCY\ngTbimm/lZMCea3EL9n+oDYhGv/+nXGT27Jv5XMxAkWGB/7IsNh87Lnp2sPUF\nwU0SVAbJBl3qg7iLxkizDhIOcLEu00VJuxoNBz8OlNIHeHJ+GkJDZOGBYs5J\nGdaDJfxCR8HoS8KAKUquTDLlnwmwppohild13cQuEccvLI1fGYAQfVHoKaAS\nw2vMx/7B5O6Q8dsxmG5AgK+xhMzuQYLs4x09xTNvVxguZrHx0vZnzLFhZXuT\ngSF1hbXamkoEgrXH7t+p9ybilXSRVYFp5jXJt6onapJ64FYXfRD/67aDnlmV\nRxBtiCD5RFse6whUqbb0kgv+0DDGWz0U65XXJindXvhpzx+ulnzGT0r7CibX\nS0TxIcdJ9DhZHo052jWO1nwCr9Io+2q5Ld0N3muikzNADZ8VqBPeC4PMvx/X\na6r6lW7tM1NW9tpzlIXgbVH3WTxr84/NIQw4QUxBX8A7IpKMGgKBGGWMsUd9\noq6HRQqMrP1S3rt8AXTXfS4zQpdabmVWi5CwxGmscKMN+qklm+VXKDsC23ww\nweRs\r\n=jZ0o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDXfc6ZBXEedhPMV2i2oa+F8aJMzjhM87yD0KWvJjf5AiACVQHcqxwtH2BgY9BFNWB+o4sIs1bPD8mlXayHf5hIsQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.05c6a93c.0_1584981397049_0.6169470415666127"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.1","@material/mwc-ripple":"^0.14.1","@material/radio":"=6.0.0-canary.35a32aaea.0","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-radio@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-a5MTnYY1Zl/3jCCoS8GQjO6w1wRDp5VjfSk78QYpdTiZOq4xTJd0OAYZ4JFN7fGM1S64pXVqIgCIbdTFMzdygw==","shasum":"6a08ed9028a7a36b64a0caf37767f9acf17ced44","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.14.1.tgz","fileCount":16,"unpackedSize":96443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiNCRA9TVsSAnZWagAAVvcQAIokdTSMAK0M/BPcNJW7\nhNWIzoFx9nd+HlSUjDwBgGCmj47+UN3vzp76XmOX61b/g0ZkNpWLQ5TwoY+Z\n+Flo0wifJRT6VSx6tCQEg7oCMx8taRfROuONwHy7/3GcFXvXZZvbetvbiF+4\nqzcbCh/2wtmZ8WTgr/rNlr42Gyl77k3iqGYG4rM4byLBzySLW1cc3HGIx4Qm\n/TE5V7AzALkvUkpWPMmHYy+Xzrmdtw7t/LrW33IidUmGejZfAy0zVUCwFHsq\nRhV/FeQlsoUyOwL3FwVIe3e3hvis3F4fuFHPbDha59Is4TJssh8lpa+ho8u/\n3jBMLEswuM5ezn/9esReCfoy6ge899nkCHVmq1W0NV0VZn4Pdmbqm/FGbqDq\ncN6oGwxjmn+wC5x9LEXNgDoriTv6hlodim/o9s9B6b+VE8fessIrcXmRhP33\nc7Vst/kRbEpbsYIKgm/fyZppUH0Lp0okECefA/0qSpxLdISy6qmbOfqO1Xol\ngoKcaLjIANGvyMkcmLeDYJvZi5UtFJtc4ptAAqCdU6jXCD6SoEdBK2hhE9Ug\nHgvzndLCwmygL68dTY7Ws+534h8rWsLD8XegcW996ryorgFnKn1PTiafME1V\nDJ/oFhKkgBKimYeD4Vo+5Qbj8CFw33ZqDsSfZSXcFys6aiDaiE5P0Amo63Ph\nRpHt\r\n=Ijpv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8DHJFXDt5e0xA7UMdiIL/pmYDzwQIekmDVGcnxGYsaAiEAtEmx7o2scdf7Fz8q6q8uNpl643vUapfUxAWP2v7kTv0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.14.1_1584986253170_0.2548505967665733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-ripple":"0.15.0-canary.4e6be3f4.0","@material/radio":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zoNSaSo9AyRbZUbHoSc88FPZ9EF0jRS1QcEzlPpoE7X+C0RE66gpuoNQXUN1h/XpXh9ZO9URptHivch+6uH5JQ==","shasum":"8ee35478e6df9f9bed837e7da55720cd803b2191","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSWCRA9TVsSAnZWagAA6REP/ikholprK/goPDqYaJUt\nYO+JzXbZH4WfX8eHba5oS4FL9+AO1bnYY4AiG4b96KDyakj/LdAXRKK7bdqE\nOJuH4IJ8Qn5aSAlKti2MfzgveC4flh/AZEY1G/z4oSY8rzV8ysA1dVe2bBLy\nPuxOhWVbVb90PvNijg4kRIjKr7Omgq3ZrEpKOqeAoxKnthm71d0NIy+QYScN\nmkepasHlkuLM3o2BBuguBl6Mcy5HDfeTJNRbrW2WWFqHFOhWglMPpGCCRmF9\n+H8r5XK7/tySKZbHYTVgFnmbkfeYJ2F2gyhMz/HiYBNUf5QEnN6hH7xYYPur\nQ4h7a4TxzP6cgBFud5MIozOeBA7ZWQHh6QV22kJ32HueSMHucAyjeO0wZ/5h\nRjoi8N3ebLJmry5J57e2NCRx9pmIe1FseqX+XGVBlIWzvbyCTTr5TSAYn3DX\nP+4l5nN4nBX/MVohDxz7082VuKAoFwr3EIMuQ+sI4ryA2ltZpX58j102c4EE\nBiuuIsSl1XfjSK8FXTQ0ikk9w6YIaYmx0FZX6okodigbrUxTyf38zkjmHmqP\nZVFbS4XtKSnZY6DHY9SDmxP3VktL81pvTeiY2qs/eBDppzjPhBd0lEoPA9nv\nn16gLCtvcad4L3xem4o5U57QwQHXo4NPN52znjTIn/+QwcDOwlJWRSBYpHBt\nPXt2\r\n=irdH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpcD6jr/V9m5d9FyiOXo6/Cs/oS17mXyelcWE+Nkq2eAiBJQZs0ud9w3J53VeiRiWO4ytNFrk5HYBgigmmpGs9Ynw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.4e6be3f4.0_1585083542247_0.6508566823101274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-ripple":"0.15.0-canary.c29a683d.0","@material/radio":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vIiJqbZBgDRn/+ZY5kpG9JOgRTt8dDLBDjFGi/NTmUoa9IKdyMIFa7w1OZ6r3LjNPtoDVGrOAosSvKENmGE6Rg==","shasum":"9a1c16f30b37eb63194582a0df28ea0af47ef694","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeni/CRA9TVsSAnZWagAAYGQP/Rl2ytJsPR9RyLPud3eM\nAF0MkMlAxPhAHdYM/orcFKxYplhUA6a0Imu+ks2HNYEPvQJmDwPLtW9qPMCs\nAdnl9bNIiqK1GKzFnQu/ganKkSp2V2+upILMqZXrZnXIq8u2+pzydK7DLcCs\nQpzRqn4oXVTPf7Gjmfze9TYBVjg4cq1ejcF/3a1VnfZOSmRPpB9OrQGP/O+G\nx9U0NI0rqnDSMwmANAs3tIWDeH9XTNRtc9REJ4Ykl31QnMbOVRsbseXdoLls\n3UoEWjCevIHW6Lyl6bxcPczhHO+j2eTZ+dof21drCvkK84L2hzkegcrh9Mwi\nfTbpS2jwD7F8i0Z9m1NbgSiJTu5mXTi/Z532hDgA2GxukfIxB7u8Avq32YyP\njfvPrzlLgUHtjbyHQ2Ls9ILsKPFKGxH4WvoME2hTrC92IMhqdI3N+FnJA/4W\n0/D0TPXaZ6J/H/M02cNUFRJGri67ynw0m42xXuw1Z6Je05WmkArZCbBc/aU0\n/N4ZERFF8D/P21Kh3ohSQomd2zlixR9JooQ1vYWIvG9f5Q7ZMk6TqNzhGWyY\npBMOFzaOBvxhYxz6OVX95vyYcSDZRXA0pbnef+3eS8UuhdzaVxUCOZCrv4Vb\nEJ31/MHrQ5pvk8wFyQmeHZl1+ILcWClzAomgBY6s//JAeFFYBCYFY2gkDB81\nqDHV\r\n=UBqY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjJxpe41K191qGCHnY4z9dn3Km1gf79Ft6ueicy8J+SAiEA76yykqnGiSCMMIEMbGRnvLq4VHBppWV0JnZEV4vO96Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.c29a683d.0_1585084607018_0.8087361646119209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-ripple":"0.15.0-canary.fca3dd9d.0","@material/radio":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Bi261dEsg0iTmmh8h3HbZbeOUSmENwox/ox3YgtD2kPqcw55NvSi1q/DHr1qkPVe554UNlTK77l9feOAEllxkg==","shasum":"62aca660ab9ce6f52ff8291142549036131760ff","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsTCRA9TVsSAnZWagAALvAP/02cQTyHtUnZLXkYujLs\nF2lwerdbEpZlIlCdodGnSX73oncp1mXyxtltO878jzCMN2DyUVwQKwr8MZKi\nin6/xBjobL1T3T+JWyb4E4qOQXTl1THMih+64J9LblAO+nh6Th0/Ewfx+8qE\nlvCCP43DWTQnAjXD1eZKVQxHokGB7SOUgbieEqkZpeaaD0E7M7KX8WQWumcL\ntimpeNCPV/bjdkOLyEUeZKjiG+Xn6xmnHygLq6IovPmPtKU4mhdvCXBWpKQQ\nI1Wp1w4LdLrNjWw9Nn2yGdKPaDFlaqMtXJwQ6GyxdI+ubijT955eYu6tNa9A\nbAzMKACOsyNip/+UdmKn8zMRpsZlI2ZES4/ANl7YYKzka4YfZDrySzb20CV3\nl87MDsW3yZNqYYwwC6ngWcKuAMTXsTIMbrChBvQ+alVGtllLkUdB4UpjPl9a\n3SQQV5HFkOSdV3uDpBIe9lKbUAuH80YVK34KLjO80/O2lYs0EPZO6ThftKrB\nl4/OqhPnxaVnTwRnmn66uFDn3jdiSseX7Mk+0uKF3Do2gWuj222lfX6pfj1e\nm+u8uuKRzcP1BdcgAqXIvThqqQNwybmpTFIqmViSmJ00Ioz8IYPn2qAhihZi\nV5EXTTa/sa2m1hIUkNCSVojAlUrPxblHGhtEQhAQqIIW1KxUX/yvsWKDXo1O\nSL2f\r\n=Wob9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6358KO6/QBSwaXf+r1Ro3/zgZ4sovyY0KyybfxzFglAiEA1HhDu97h/yu4HU1OHu8LH0L1hZjtyKnPSryrsPK92+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":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.fca3dd9d.0_1585093395549_0.5247868855000906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-ripple":"0.15.0-canary.1e73da49.0","@material/radio":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5W+iUzNvDnUBVID5vrxWEIPvE2u3iQ0PebU8d8XwbVxbLgscyz1cCOdN1wDfz9GHyUMs4MmG9UKB6sQlsU5EIQ==","shasum":"7b0e68b14e298baba1b353ae2b2718561f957a84","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81hCRA9TVsSAnZWagAAsigQAJCRO45FMSjwcdZ8tRgX\nUBqcfnErH7JUu34YICcdXevP7fHEY0sAhXuGh8sE+ajho+MyvDCUVSV+RcWe\nQ/NS1306IzwvCH33gysoAWsw0Aq0vGeT+KEzZGTUlGIXdlDymKGRu4Zt7Czw\ns4gzSshm/cgMwVkolSqPhuK6pGoKeOrukAk6cdqUfy0adbCj2Qq3ZpCAPFDy\n+HIeQBmcQKM1oX6l2UrsZnwc8u1qIctz6l0rfcj31Pz32wSp5+zfVRGG2lF7\ndh/vlfl6REV76xs6vt1VF6lYBglDS7EXV0AFSCnf4FWxXJcYpkSFixJo6oE+\n99/tz2WyiwabfRrtOmMsMAdkfkCzCMz6WQ07L9GyFlwecNZ6tOsHbQg556se\nqrbuZMnyLh0r3Mh9z7Vh0CEDAnmzafHyM8KpY52vkoEq7isqelN46rQKB4X1\nJ0dEcq/5rL2LCxyHVvzZKJfpZ+yIr44Dl7F/+HfHn4vi9fcG2HRaS/lQcnkm\ncB8WVcMK4VGmJRwUAHC4LYZkzSMgJ3ZoMEst4WaTtB5w7rbsZt7ODxgv8myk\nyIxDRePO0/rYgZifJnyHOtcA9bssV92mcSWyMVEtIX91nEZ9xE9JwfqhKxcI\nnYywFUYNUQR4qxE40HDUoBOjW63ERCBu5R42be6EIJ/HfEkC7LASpji6+W7n\nt/S1\r\n=ebS8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHN/BofApjQRotPuHsq7Oflh+NHG69sC8uzT09tksk/+AiAl9jEq9r2k/He+bnwHKqmIBmjAaLMrnGgU0vJS9GeU2w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.1e73da49.0_1585171809185_0.7366261416653532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-ripple":"0.15.0-canary.bb6dfc5a.0","@material/radio":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-b5tRh0chnkbekNODHkzvbzECPCsuuLLuz+OfbcD2HvB4pWZ4KQliy75o+9v+MUNp5XDdNfb6cnGDOZkrKAMiWg==","shasum":"5ddf633abe3fe28908ed500354f27432e738a935","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVV+CRA9TVsSAnZWagAAsWMP/igY2Aw4YDC6bxCiS+8u\nnXuF76JDh7tZKCYYJn6GSQW56Ov//C6y6iT+qN9p7eJkibjS/faM7Ggb5KjG\nm6HM+RDstTqMWMJtliBJRFtTLVOs7V95IwVK5JgbaDPQyGuaSQY3qlBVsoGE\nwOx/NQ59xiH5Io/rAo31KhqGwfXlqEEwG19Wguh11R1damFy0kFysVop6b97\nbONekaOoppiF1rMXOsq8bBwI+7Kuevnu8YrZhXZH1EADCI5Hblv8zJwaBogT\nglscPoBSaroEDFrTvvUY1gLcumZu5MH1xz5g71REOHRWm2uq3m+WnIjasUFV\n6qWCToX80CWfA3zcAZijMdR2XlnDZvtG2Qfj3JyzcuVTquhPWcHbCdkb+Zan\nTa9tTPVXZbUKl7S1HoDkmWrAoMUENmrTaPwGXMn1uxBE8fsZAPWKeQeiGg97\nwwKCvuXkx6NI4xNPSrsu6+u/BiEtKcog6t5Or+io9gjdfgzwnUYt/055u9mE\nTu4GjR18u9+cm0CjaPypErDnUouhZJ5N//9GnIEAKHj8YS2CpnQbv61bDuzi\ne9dCVVgg1NcQh6wkvvE0h6w7XjwUBPW+HLdEMaA2nOH7oFwwmycB9E7J5YFn\nKr3IDqZgpHctllV79/aZCeRlDXTQfYG6JNne83+GS5EHL/yRzOxVsLz90Aj1\nW6QB\r\n=gGgG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqlE0vyEMX69PEvOav5b53EHZoJkQMz0c12mm8lyMo8wIhANyACyBjPTCBO/HJFgb2XubDfOgIndohQv/irTmlqIdS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.bb6dfc5a.0_1585272190187_0.10390302834813325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-ripple":"0.15.0-canary.1884603d.0","@material/radio":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-y2f5iUTpA/5kn+azERt+Bd7SIjLIEH4W+t5ayfxc5/iY3IkA4F/f8Lmp6P/1LY8bg0VfXlLxoqazYJmgbo1ysg==","shasum":"88845348fa26e78249056d4268979ad10e9bc6ea","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflo3CRA9TVsSAnZWagAAsaYQAKIO1Sqm++apXiek1LyA\njMuJN0xFULPvHzKYPmXNwWbIR+kpLzOLvKJO5Ths/BTrO+3nPfuU0n6KOE4P\neT7/dQEPCnzFMoVVbsiNfXeF7gqSElh2ga9IE+dq0kbiFqXMGodmgITZeNR8\nMmtkDfIVmIDJ0mdHexHchHyAtmsuJUW4QaamIRJNx5IB4vZkJhqcHBxwDxr4\nJzpf7O2HCG8PMJtllJHggmIBShDQjuEQK6s1WyFJc0ZGcO/4pSnXp+xSJNod\nMuVvKrZI8YCpM0TrF+9tdG6ZuCCor6PMvkYtpviFyEjr25yKe5wQXx6XOGdm\n11QModX5I6XDvaqiks1+1vsjMWoirtGXgtYquIMkvRzt5tDR3ujpibfhJgNa\n7U8xUZtxQ4hR7Hx6pPHhC68EAZELekREDA36oj1ejFzpBO9Vmjoyx3SNwAZk\n9mu862BKyk4A0BDcpbEMPY0R9hzPeOsDbCQT5Zux91TnnKkGfQOOCXsjhVjP\ngO7OOYOmLVC/dYaRGi6qS3spobBIbfz4l5FvSBxbg/Y4VH2dP1TqcoGY2t29\nEFTWKeb//mDBfj+3oDvUqQwn1x5KWl+hNwmNX1KmY+Hq/H5oPLOgWu0cEqCj\nJC1yhjJ6MCxC6DRKYdY2ZDMRhKVQuP/OGPIJlKJPtFpvABQun60G4zinlVH4\nTO38\r\n=Hrga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4KgSAt6PJk0PxPftjD4cffsuiKRXSiMSxEeUjIbCL4QIhAI0CfIaCV0/To5fQQdLj5WXtRJRioqky/H+JL7/YW29N"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.1884603d.0_1585338935264_0.7767059346062601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-ripple":"0.15.0-canary.aff73cab.0","@material/radio":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7UdT6IEClwLdhOxCS+Kmk9bt9ss80byGXQ78k3dWg3wvA4Jay3DIPdea1Y7QyISm9z8x3nwXEQfNBTAAgivVqw==","shasum":"11ba44c86558bc75f1e0597b6afbe6724913b6fb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyzCRA9TVsSAnZWagAA5tEP/1OP6YRUckcE/W0SBFB3\ng/Zj1MvI0ycxko5OACHtHY+Ne5G7UkK/jSY7GU1EVWsDYTpsgEW9IpcA4aBN\nEV606oA7Lt67S3yNJKObtJM9hMzDfyLPREdGINf4ABU+BF3DFkS1mI1thnTZ\n7t0zVKSit8THlTMViI6VsTilyR8JZ97SKDqmZr0uRouwg7pe19aHf0HqWwol\nfc/d55ND2ZigOxsp+WWFYH7fdLhQ1g5Zz3L4QAvwT3HPJW0H/jyRQZkzlS+c\nqglBpoWYLIWxFNrBmSvC35R+mpoIGC971I5sX4PtVxmyeuq/Slzm+Rf97aT6\nDz9jLnc8RCYnI+jo1A2dd1VjkqAqgGY4grZ18DtiaagOHeM0+c/JAnYuV5/6\nc0wQB9cnyuT0R9YPMwE5UlPF2IcpHSkxE26ZlkmEyyG9VorzCVOf0UhnoqzP\na+knTZ6bw4BG0Qd5MaPOp2KbJuCe72TUcYkwmpJvSqbQ4RrkEO68WGQRF47i\nc8Gcj4yEmP4vwcNOMzKtcHnC5NLXr6Zz/iamHKmFf0vCJdZIfrnB13PG3Sj7\neOuAKz7c2IAvgV1JUX93S6KDhPYzEYZpEmaOSSeyAAQ17pzcTflPxCH7ntoJ\nDs7v2WFypzluwZmBoLFXciKh7zIrzF/KLr76z2lUzgsLZmzOj4/RGGJK4zYT\nRjVd\r\n=+dhl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtM0MOSmXYbtrgO1q5tlFMkYSJO7hEDkra4r6KP2t8nQIgKD6OVKJNp2yZ5m1Rn+HKcfrhN1QvT/5dFVAsjfGmso0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.aff73cab.0_1585343667000_0.3639183532971426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-ripple":"0.15.0-canary.63168f61.0","@material/radio":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xArsEGIKbN+2WvkMHdwuOEbXE2X31fSrXkLBip/oNE+IwLlwcYAKsoFfHNTZO316fb5/YrGWzls3pdUStgn5nQ==","shasum":"b91d8d9508bca5d30a45aa3925ce9658611848ee","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gVCRA9TVsSAnZWagAADLYQAIlXAv61HtoHyyaMWJW8\nhJujffHD4x7T8+lvQo6LRQRQh6MNl1/JGvuSkzoNDldUt55dla3xpT0rmy1M\nP5hhSDINW4xhEwB4ZXjTYxDNRYMAD5ZAw2U2zgfq2r8a0GmbPSY1K8y4N+gm\nsD8J/A7qayhnPp0OfEBL3qtG4Lkx3rKoxB9RQ1OS5jGKmKPcaWeAOQQ7a5l0\n54AQfzdjUhBJg8QP4KF0G5d4gldhov5L2NVm5XH4R85BxGoRRp6SEHCsXDh0\nMJgrgavIjaCKa1fk+TXutPX5d9cRvyGyqhxXgZGSkrFMkRfJXpV0TMb7wnRz\ngFyO1dh0ZPo6wZYZ0lZzopeXaneC2XusknnGeakwXdUAg/qrmKmCqUoGnqJQ\nGU5IaQKrWGc9rv7rPDtKMQkbODgA5dCB9KqxDQYN6MYp9xOdnvu2XgjHqH6I\nbpHC1pqe6SqOTSWMSkhBtpO1pPcq4v7/GubHhYE3UsDRHevla+Cm8QWkrPLh\nuuxD41yvfYy9FOukBtqQ87txBYM54479HPLh7VrpyMYSl6rduGbOim0BDTX5\nK2QNRIGIMHnSm60vr8Xo8rvcvmS8riN+ufnBDbDuTmRiFKR46mj9eEBV6qYE\nuCASmKwZ4TFhru4I5DDjb9UWWh7Wg1uk0VWyHdIDnoXcyHLYhhtBI3I1Yh9k\nRox7\r\n=p6mK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEva70xh9bVy7SByrCIbiVl91QnIjihlAPlBI7izNo0HAiEAssmb8HStpJO7D56Yy19Nr1nTyx8Q6rWdrhxXchTbhTI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.63168f61.0_1585678357364_0.8528835108137967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-ripple":"0.15.0-canary.9fb79b3e.0","@material/radio":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PBqlin77IHv4FPEYQ5S7k/Xg3ssdztH5GNUNfYIGEvPTt0qYB2cZLNB8GsvW2Ofo6iSf74DAwkB72CuGCcfCkg==","shasum":"2fd0cecd71da0a6fc546b0e30567a9d8c4927673","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QZCRA9TVsSAnZWagAAIlkQAJtK/yWlm3oKdIdb4jwZ\nwhfYpML+ylw+DWATwaM2IPBD3P2FrkD32etwKpxklHyX0VkWCfFTigxvQcBM\n7PYWUZGiT2RlIKOEIYdq1MDIsNZlDqchuZU3biEuvqWvGrfD/Qzwby2Jws20\n0fCtdN3ks6dVwIwUOWsO3vbdsv/2XHIECe0KU1dDkQVi98C+xMOj8YXnMmkR\niTJAOE7p+NUrntr7by/xg0wtRj/leeKyrCw/H6lNcwNmkSCFuGJkdkTbBBVu\nA8YKQ21V7d4JrAhb/ZCoe9IBw191hueoSXDpuF8IgTfZYepEEu2F+Ji1gtdD\nb9F0P1HhP+7lxBMdpLXwckmvE3+oUC/8R7K1wWZlosTG8+9j6pYYOUy1cCeN\nFnVWmx3Qxad3rcx1VQy2F2HycL5UjKmF0YrT0+TQwJT6HYzK0fMR62zONuVP\nRAJpyz3USHupk2WGbNsBOHxYOirl/oU/R58OeQx04G17UoptdCQEZrfQP3Di\nY8QB1HHXX3ka9ZnVL5vIjKgcuTcbHVrklNzDU+YqQpaWKHnRNhdqRI0ebT4y\nXJDQXcKPAG+7YhKfLHwullOzir/cznQOVrpzVA9SH+U4BwdsUiQ5bewDL2Dq\nOXBBaXb+ezbuVLiodtLb1aw8yNSPcNZR/t5ixsQpALqqBYoMt1Zjv1lqMG18\nBExI\r\n=NPzj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSUjDd3yH/ZMg7vJFmOOWZ82aKjzKLDHM64NshVIpSvwIhALsiAwHsWFy81oOVNThxDZg+cxWNy6WVBAdFP80fxN+M"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.9fb79b3e.0_1585689624758_0.9813223475466228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-ripple":"0.15.0-canary.9bd3e9e2.0","@material/radio":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vyChrGYmpDDqTwUYxEy4YC6hIK6Xn/d7NgYFuftvl3shESOIPvkbYip6f33zvjv4QAoP/rDJ3pLkjyYHqSAPMw==","shasum":"010856188f7de5664e51a91522aea87189ff04c4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91CCRA9TVsSAnZWagAA4FYP+QERPaic+l+yPu/K6yzA\n+EhuCegQTVyhQF+Thc7iFMZj+PhEKke12F4vnNxglO21xZYAQmPObtUETAHp\nXjU7q8TsvGKZS8X3RPCJbjr4q12ll7OzQ1cx7JnGjj7jm0qVd8bWjMfWjwv/\nkLKQT3Gm28FrMNHOr5YjYGwq6jy/WbUc863jYUZCJDhhm56GGEacG/BW7+hs\nhaEIpyacjJIO4jyZfg9Wvkvu0fZ/Jp7T+MwsIhbksjp+IWY5goEPR4iYyqEx\nbIsKA7T8hzL3Uxsmfzmp/Po390WQIPTZFOaZfSKiX9bjBhY0fnVVZcVuLvPk\n3WO69E+u1a3AMmqrTK2IvbFm5fWbsr7SuNPoxZowh4NOKY/UdhKRilB9DkkD\nEJX5SwdoXVvEfSD/LlzvkHJCa348wU0SmjftZidPk/KWzrbYB+3gCyQq4YBx\nqE2nqM0TjvZIlSE15sK/7rgv05DxGOvcn2/dtE+ZA3x7MW0lhOcx2MoUg7bL\nfW+eSr/3PSZH8VrkV7qkT0+m7FLNejKPjGB9ZeVTQDorC4tcMuoELjRpGqPG\n6Ug4aX6+OxuKcMaYIia1t+MInzMyoOOeC9Ghyy6dYrrFiHmhAEMzhCEoh5Z7\nDY3iI5a5e1q8MkucGNwZtL/OiaaUwNvqtbm56mQ3jpgyv1lcKwvfLms8N+vI\nSgXX\r\n=VggZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGt7eYP/AzvgEw2L+QoDlsUG2TjzN/7ijOIxpk/531CrAiEAm7JEOyGeByHdjPk8t30xTWH7sl8y6XE4Ci5zYM9Z8VI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.9bd3e9e2.0_1585700161901_0.32280583377502414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-ripple":"0.15.0-canary.072084ab.0","@material/radio":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-e9rvDh52MJDO05ZzNK8OFq3uo1R0PRLvZ+4jRdo/6Pq47cjx1Scn2/bpI++8EAZj23S/1MElvMSPZfvvTAwChw==","shasum":"d708645aa647469a3ba43cab5f758e9c691802e4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":96486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOABCRA9TVsSAnZWagAARAoP/jukBJZYbTH8oeAtVzVI\nrDzR9dXEIvZ+mE29LFVWpJqPYReOvRB/z36jjjPcr6SCu3Waymq71nsq11Jv\nu3zCqZ2kP8Q+FGxDW9FthkfA0Sx+yCt1Gb1ABLer/zQKlzJQzqcljGz99R8n\nviacOOg4Gd7AGhR0T2WrkV9nUaJ7Lun9D753WRKe8nsc2nHJz6SJcI59AYcX\n8NhKCbO2D3RSf5JsRECh+Tos196s4bbyxesv+O2bVpGFX6AgKmuCEVjk03/O\n+3wT3R1OjifoZ69eDWRgETxfS9tR3qoInYV8EnVZWTh/wIPrpoLbKRapWWcD\n63N0mzCYsFMjKdix92Oac2VWgWWeRaT2mpxMnVEdVzd4gqHm96SEmjVJimVy\nTiYlUQeK4xNlJqe3wfgOwiYbVjCtLUmp5JN94ffFaPInO09GD0aKJSbvBd/v\n5qQ5unBN3PWJs3V/oqNlrxWRs4vDKWkaTWoA9XnbDPayRQ4eQ5Xj+VTFaUDf\n6kjczkzLqcGWxEWVAltgoslEsOPgDcyQ1omJPtucYa34gEyYvT49QxYtn9fk\nT057PPP4c5RLJ/wMzMX8xN6VuYbmRwMSHlU6J9ppGwaY0L8aRRCHctCBul5e\nfZSfCFfUUGp9ZqjONX809VbUrFOj8jo5KcYhtxAaZ6ERw5eKTE923yHXNXbr\nlmvL\r\n=wLiW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdXcBCxJwvEvx2qzfjil0ztgrQWa9rlFC4W1PBA4Fe7wIgQIBHe8v8cQKw222jdoLNeENC1z9DGXyEKnq1NSt6gh8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.072084ab.0_1585766400581_0.7657612910615181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-ripple":"0.15.0-canary.4dec04af.0","@material/radio":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Z6/S/8fscc7GLLPgsLd3h7uHYECHsUQNTRoMk3SOcNPMhlKYn4SPt+8MULyRiHC/MOaRg4mcdObGz6W8oSjVNA==","shasum":"ee6869b7cff18286cc1ad44fe28b7693976d1fb7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":96486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zACRA9TVsSAnZWagAAc18P/ilFwTP1j0HAf/STal5n\nHdVN4+orXoHJfNlfpGhDRvuaB06Drssc9I9Urvm+k6cL8g7kGa7zGsxLSL/R\nbU0qOaq0gjlXmJx9sjjOJibTAGbBULO5MTNzhm34BxJdsKL4575Tpq5Cde1n\nfRVEFCUT+uqRHgWKegJOrE71BZ+iTKIOKgaqyrt82fDWOGd+BaZIlUeEYnJc\nThI0VRqz02RAd3GqK04PjVm2HGlAannaWhDULEPIUdvvmyrOXzZoxgz9wd0v\nsp5q4dR9o7doWmJinvokfm3vrP1Cr2ZQKbGtrH72iiE01+zWFhXqZlPWBCyV\ndVvrLlhT9fiaNSPXPjTsyEQ9MxKpDHQ+FNEVqjQovymOFzjLJGpJFiCH1Pcb\ndNMpj5R8VIJiVDaOFC7ekrHkOK0pzfmkoYHcL/5GfNFrMM5ffBz/B49th21N\nbeNl1m/HOc14vl5h7ssueFLhR9LRHJfEqXzuptpk8qZmDhHNOh0J+VL6ogSO\nO9F/KPvuArjPGc0CWWecSLp5wpDPCj+gTfR71dVCZWP6HLvIrAgomI6TChV9\nh9pTdn48jI32sosVmxARK5RAh65lASC1A5q6iDzSZ3D0UkNEBbLqp1E8mBNz\nWWq/SbYLjvD7D7Nr/XLuWCHAkAZ0pfosOdHokcWLKBeqnixiwuRPZlRhs9M9\n/EIy\r\n=07zV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHr72BVur6hQiCdghU3Jgt9K976WexzKUFPpKUv9gCMIAiEA/D3NNMoFzvy6D4/eW6gtK0nLffv7dHKCu+EpJqhHw+Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.4dec04af.0_1585945792272_0.5852675834439058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-ripple":"0.15.0-canary.9b676354.0","@material/radio":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QmCo+QaSWjl3saVuDxFFnh2SHbHLU4nHUh3R4GwRLacaw/1XOnKLplWChXG6Vk1KFSllT5MZhdSZkSRJ6wnhvQ==","shasum":"cc2215fff073cde78e610d3bdadc96615dc5da9c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":96486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zTCRA9TVsSAnZWagAAxtYQAJCo/ax0oym9hX5TJIR4\nfC55oeaSKi7M3Udsk3O9RYbfRyP4uOKjVJLe34aNigPJu1W9l8bQ12kr9vnt\nuz5yAA3gQ19HmodNlrSUiOuf7tPRiYGh/RFi53XkT5Zy4ma0a4fdQ7N7W3dT\n/iU7VBxW9XR3ePdLjoiyspI9HU9XvmCaD1jC5rldeZ/3Bcj7PYxHGtauYjOA\nJZUevbz9SmkGtdY2z7zcZx3UTrUTqPaTrXjunHVSIYldZBVWJikOkJbGaKA/\n/OOHnyVYS82gjjF61zvuIz/TB0hWoupVuwpVK2HxqMAMjCyDe60ehSAIyWl1\nL85dYvDdLCd9xNa0crH0xviE+NEnkRItZBly3KdoFzijdMGWBt4nYxk56VTH\nnsmFW991URFnq3ELF+Ab/0o4D0FvoejBUHwB26dFTsE2ZrZP+lgkN3FiCdjT\noHBVnhMtGhuOjQNPKnsIKq+b/qkvqEhwtgAmlJO5JQJoraYzbp+j4CSxQhTX\n1okM36uUCvJcyaLp53XrjdmLwXc3Ntw/DaPLjHNK1A9dc3ghwiEl1PynKw+I\n/SDHvExrhfs0TDcLmZMP5drKzxfaTbRN8AS5TiskpBB/LBhLZ+myB4+lAic9\n0iPBwL16zvaBvEbEDEiBMjEtTbFVZp12ZKZ2f1wJNjAxGnnD5iR3zomKwjXa\nRve+\r\n=2w3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJ8kywKViwraZq+iC3qfTb7AyIss64lxUbcgB7CLwvMAIhAP9tly0YpDushbX2kIxOoIgM67+bnBduxWHs7OsD1rNb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.9b676354.0_1585945811511_0.06047319708876464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-ripple":"0.15.0-canary.6b946095.0","@material/radio":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZlGseUU/VMCwUOxRU9EoCl5WingnUgxij62uqE4Sy1Nw8S4XO9Gbd5uGTjrURHQo3kosN5LPRUjlTB8+4X+V5Q==","shasum":"500779ac18b4d53234cee9d76b43651355c0229f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":96486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mCCRA9TVsSAnZWagAANqUP/000Zc/Qi7LgnQTBLv/a\nDLzhoQ/BCE9CSsi1myWAGrjPCwI7Ajf58cUyQbsYq1zdGmaJbowzrmfFZZX9\nKo57IJ1yis76vYZf7SZA1uBzqmpbVAJo2UKWkizJMFqLa+mtJY/Sw4hLv6R5\nw1SFmbx9HuoLLK7pt9+c4hNxUarXWXfwtJ5jDx3PcpsqifC3S6q2Eq8hl2kZ\nIGFkEFBYVb5ytt39o6Tnep0O9u8DQTL+/G7DCPmFMZRv0ozoNWz2gfqN/pkv\n3IhhJvp6TVzKmOvg8RbqEj/ebzvN5tTJwDwTK5gp03nUUtgpAoOhra9Fmgta\nxQp0uiJprdMBsgf4vki4HpdYwNDw91Gz5z5Hn+VM68U7gfk58RrE4c/xNBAL\nNvXJxe7miqRcJkkXQ+VUyOelOYFatgko8tJUgDg6VdrFb/IO+cdvaIOtxNAp\nefgR81SHDgvzXWUlkCIc0sl1e//sGd1dsBwF4Zh3nRn3vVZemfRq/ofSTEbP\nu5pMqooO/XcESFYhtb7dTYnl/fSIwQdBBC4gVi1aDcHLw5XI4cKggCSJZbEd\ne1Jy+li9EUlNfNb9tOa7wCYtP42g0YMq/dFM+bSHCm1opGo/ZRD0IwaxxfSP\nux02tnpeJBTlREafOql5uPlpQ7Z/a4GCPbJjECwiB7p0o3i6nBAuWNqgibud\nD0PH\r\n=bkOY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEj1/WVhlYeYImw++Ka6tKGtKNB+o2LJbTNK3+WDsFL8AiB1y4QmubiZkw2ppJd7CYQszZE0ApP53gJRSo1nBoRyeQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.6b946095.0_1585949057575_0.584786269293113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-ripple":"0.15.0-canary.5ccbfaa2.0","@material/radio":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DSh5xtAb6TGqRRGreKxsoSvrTkl0qGlBUj5Q8lqzVtZ9PvtkdMbWnrgIFQlzu52z+qLEI/SWxB3blQcuyumvRA==","shasum":"f5c2c294f136523420c65d11ee8261ad8d72be08","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rNCRA9TVsSAnZWagAAn00P/iRH1drdYn2lNgDghglB\nNUJys/L8gNqqD2D3w+pZe7aNq1z5DHTCpVDL/Nisl8zjVuECg8KisSdSDhYq\nvKJGbNbeLyCeqq3M/Rb4jn51Mr9HaE36AdgJ7C32JsJF6QyCus6ldJGqQpiH\nBjVGljtYbEQrMAbU6YMiUGatBBjMS5fJh+I56eZX6zfFPPPrGkmil27pSLW0\nToaewU5JhplDoB3wwrxYQfkMdhm5dGynYi4OAZrMy8mVskwAik9cXCplS0T9\n7/+TW4uzuzpOZRwK2paXIXSMtkMIP+E42VsiAifhC//n9XXmCp3rr/RwRkFY\nAF8XzdxH1PHLGA5CpwmRL4rC/JnktYS4bUjb9gSSjtt02VOYwrFJtJzX+tGF\nYgwVraQ9snLHnz8st9UDh++0TsaTsMeL+79WxQ0g+wmFNsi7moCENFcrsIKy\nycYkbCQF8Ornt55M6TBuFxyYFRAiJ2zlXQRftIKAzKE6iqtwnHyZI/QLfpxJ\niGI2zH5k2+m95Q+ghtkvEe6iWO2D4j3GPxW+xovnPxZp1qy7/x5U3jq3Ad7z\nuRqYq40bzRVWgQuEf41qAfH09/jiFDQ3+O9euKQ3BQVZpjGeVxOsO6FiaDae\n40UBTmFMLu++zt2g6sV5ZRvosw2IM4U+npAMb94MlQwcP8OGRZ79srRLnLY4\ndLx2\r\n=lYEh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFMf+h2kLOHlyYXhh9rne+K6Pzj8b6FzPtP7/+8hJUeOAiBDMYMvpmX/pyN8B3q9TwSpcv77xgXnxuWCYmm63BSISQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.5ccbfaa2.0_1585949389564_0.027142452816100393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-ripple":"0.15.0-canary.a0ab8772.0","@material/radio":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QvFW0v/l8+gt2z01bI0An1QcnlcFqu461D6kaNa0g8yfIudmHn2uH+vdWOEqyBfs/7uq/3TlwUrhzeaMm9Tr3Q==","shasum":"297a9d721c23afc81e914888b09e861945af3f39","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3cCRA9TVsSAnZWagAAUp8QAIuohmKa+XfZbZxU0kyF\nyy98BmMQTeTy5nyItXY6QAqVWGWGgOWlYP25d2w28RNbeTezjonlbOiFS7ZS\nbmK9KvLis2d+Tgge/Dgmdn/zmjLAnvOjZQJZeNYo2OX61bH4ichM8tcj6tPw\n+wLhGrIyra0GhLRFuNpjuWRAWaybo59ruShnoicJLMF1wFNhf2Z0O5FlH+FP\nPLxlnTKPshXCc72Vb3wFRh7QfTuaItw82/8k34LRCd7PxXfETZfgRumcI4L+\nPIC8v3u9z25uz5uhFiT/tb/SchB1r9S/mB+qhO5xVYLjS45TJHYTvQe+8sYH\nV0oX5WVexfPdgQQuEJVgOYyfXg3zu1FisSfUwC5WEdLMkahV9XGPjFeoVcXW\np9L8hNy3pKLd7RJmU4TBiv7Iv4vlakIeFZOBTQzBRNGaUBoNOZ7fJXA/DRDV\nEfoJ8SOvhjF0EEyPN61eWRvR5Xi2QwxTzerzMDLDKYC+WawuExlOMZ1P5pCL\nbieqRKELdaQCk4KVXEhu1zBkL4H07CH5KJSWqeNXJDunoq8aHdG8EvXjPbPC\nGMq1vs0BNy4QhJRzNuMl+o2cIHmkkfUstYZR0z9akAH3mQlI+p1fh7xxZgdg\nMrjXq7hoGgHMvOPYb90mX/EivsdEEZH90CMii8OLgaMGzIDVXwQGaCQ7mt9e\nd18e\r\n=i8Ec\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBYFw7DZo7J3vG6kLReSL0rc5j342zyyC0rwdnI+kYOAiEAubyBCYyHHZ8PCqSHHGQYdxEqCqDXG0YWzdnfOw5Pe14="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.a0ab8772.0_1586290139862_0.08907950247161689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-ripple":"0.15.0-canary.8d352305.0","@material/radio":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-j3bP7/1HpfD44A6ZfrbUAFlGLNtROeEMJueLUdQpEY4E6FWkuQAuxlhYQs7LUOPx/O0fG4OH7ms7ZvnTvSRIwg==","shasum":"1c6214df198f644f82827963379336fdd0dd2e93","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPO1CRA9TVsSAnZWagAAnIoQAKHT6VZeZON0ErO/yPHg\nMGilhL8vfQLIomhm0E879U/wCJ0CG/FsMAb48TfaaKGDMHLLy3kltekxZKKs\nbSStRHgOweRlr8M7OZmSlGAqxFGhgjS15F6v/srOwS4XHy8O8ylKLMqJIFJs\nXK5bZOJ2Zuxr9BlODUbRBV+f82ZUMySlYw1g2xolljO0wvyr48Zwn4jTb1fV\npiZEqKZe+8zFxNi/+LLoKNZusLR0GCTBXTpIvFRH0l0cHG5d4TGtn8XWNhrF\n2ZqX/JTdCq7wQUckSZo48JFTmfcES3B8+kv6rjz2Fvln5l0uJl1WyiO9U7Ep\nDIh+EnIgxSgDUyaQs4/mc277tieuxU94yjUv5/rqvMN+KSON5zrlBBcG2i7J\nBZW7qE4HvQLg1ikHe3YAph0OKpObkAlgIoeR+nIF5D/pv+IwQXlXI8P1Eis5\nQ35uocdQfsxtuKMPdf/jhsqlIyiM+lH5L+eBVIRuh/fqM3ikFvQJH2GIKVOK\nwDk1ymmbIk394qE1qrsnyvk7Lb1DG8VDyBKiqp/Nxoa7mv7w5udHndYd8PMA\nfw966JK4bYsZNzjFCop53lNnZoP/mE9GCXqIkfBU3DQSSNdGFWoZjdS7RAQX\nFV0Bec5wzUdVHtw7Xl6JHl65GlIHQb5THuOzA3g7RKxOR3OXsnmm00nWl/JS\nBYUc\r\n=YCgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1g47C57bF1MhON8Sa5ljz9dPn/YH1YJaVK5sL70/aaAiBoQBnyglkbeirdlIxoPTuy1L4PB5DzhC1AaDLmwJMkTQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.8d352305.0_1586295733323_0.5355442526580032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-ripple":"0.15.0-canary.31eac79f.0","@material/radio":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jvj9/OxKqo6UBkyG712XlYBpCKcQTShZw8zyFmPk/R9y8aquu4qux5QxW5988OWETAxFtVAS1XrqiFCyzLl8WA==","shasum":"f3f9c466fe5113512c9abde653ba6b539f4c1e2e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdNCRA9TVsSAnZWagAA0pQP/A0+oWmCPJMUzhKEkytS\nQIM3gx43vR5qP3mtl1NMtswi+RkBs5jGTaN43/pCv3NBVpvRbrlMvVcvzZgk\nbYkv8/tLhku5O5L9ynPHL7NqCWMc5l8pWG2x4sHqiVfXSQ3dZ7CDHSXPs3bJ\nEzSC1/RbD+Hii1tifbLthBr8C0DAANHxww48IiqTkGZ5AUW4rGV0hF7Sa8Q7\nFANx/vawtZTWGavAALspWGj0aTqirHjjSiFBmQX5Zv/FK6HE+kKJZ0ZX7/h9\njHRlUZjwCFkuAAOqpoE3Q0MfEdVmE798kcyeH9E0EdMbAY+et7HhYIbU8UzF\niKo13PPnqSGD6+iMnDMWMfIGzg609qMMrPXRF9wQc4PRCbShRIfnJ7DrhSBE\nM9/q3JbKVZOnT16SAozmPyRbuj7IA/Uzz79G5UwPVFCBI5Dtz5BkBvi/vuY2\n436YvlO++T4oRx6XSNBDTrDIyXPmGllE19HUehAqjMyVRbKGLl5lsPM4M0z+\n2mBp8B8fxlrKlHn5VZwTdw9NYunWZdYD2OKa/ZuKbR1PwRBAhu8v8n54CmlQ\n5VqIxv4MqzOEQpxgGZWYjg/tzGH4rz2qUxrteNR4ynbjVwEoll/T9Ktk7uRc\nXXh0uKnm4iVLRhJ6qSg7u3QtbYxFkl+b40qNdsDMeZOM4fvCRkusjAyxMmJ+\nWfJ6\r\n=w41W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp5BwNoek1eqKZO/3wmQTu5v8hN1sLG8T0f0xiI6/SRAIgIB5ePgpTQuQgibrTsRHmhwga6KyJwLvqpFOoMiNbImI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.31eac79f.0_1586296653057_0.7561597312414554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-ripple":"0.15.0-canary.ba05565e.0","@material/radio":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-jsWI+WpRM5MJqWCn3tE1Q4VKrdW+eh5SDi8dWseQjSPqx/qSZd+bF8ce3vmdokkTZ/940r7vhytYmOehpchxcQ==","shasum":"15859f63604f5e93d5b5ff6c4ea28d9ba9f97e2f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgq6CRA9TVsSAnZWagAALyEP/0An7DOCqTZXEfPFi3gX\nxOtGUeqyof+LKVK1gVXHAh5bIcjt+fJQR7e4c6GKTNR2PXnV9FEi4DFkvUoX\neroyW8bEWDaqiLLKB8BzcZ+BG2LoVU0w5SCoHKjL6yoi43HOKzDEietlTbSn\nnM7XHT2dZjPtBFIB+5T9Nb9aBmlVX46Ywh2vGSbPuVVTuLjkBDp+DNyn8i4X\n24jyCweYmBeyBzOR2A1sG3605rv8YzWPP75EfMUtC1oYOuzNY7IhMAQuu/E+\nXwdaQUDrA6GT3xghnJXs1mMB9cbn2GCfEYR2LZsy8F2TehtCA9Xy9ezSe0XZ\ncCWqq4rCnp3FDM70U0oG51NS7Y0VkrHGZX1JR5WxdyyNbF6OUpb/qqwR7gyK\n8SQP7zBu6u0yHH8WzNphc6UmBBYvNiBUxiElX3Z/+gHKcgPPgrODfEQlEuso\ntuyynZ316kBx9l3oUPeJwlfAbE/6FyI7FuUu6tAsGGF6DcJeGgRDCzqYdwYu\nOYaODpIrVQP2vjqdE9XbXgk6tblDu+SGsG2HJHdxY9iYN70K4ol1o3oO3XbE\n062cyqTM6Q0ypHxhZZMYKgDyqBJtWc7A8Lgiuny69STPzYCy3zcGoFYiqFvO\nR8emLwEZ4brw7yxWZEPRsplYvfJUH5nk+/fIkweGswOLsnTx9wDzrr3kVzgj\nP3v0\r\n=vsmc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsxEo4McW93HCFzjTVUXGDeZpyO9FFnUB8OuQsplRUSAiEAzOGeyjGBR058W424ftQEapnkQ/7VV8ixxM+dRF7MIOg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.ba05565e.0_1586367162025_0.8366712506433365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-ripple":"0.15.0-canary.25099f79.0","@material/radio":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-1rVpiqoTO1ttMAExBCH8HUFvoDTxzq/Ro1asc88NJ4TDegmgGeHaCu5dzGRkDjYI/ml9bqjgR8Y0TPu9tDfJpQ==","shasum":"da7864a44433c9e9db30c06b0df14b97909e8ac8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKICRA9TVsSAnZWagAAKMIQAIZcd5mSmSTKNulazQ02\nSm8yw19ptuSca7M5IsEgRyNoN03mGvA6bKgLAAyWawRcQekHKW13rpgsbsJ2\ntK6+KQxsgjuEEGztkk0OVEsQQ53Ezrl8eIZSnrLPE4PCNRpf1f9I79UFzwtl\n3GucQczRa95VVUgRaldqccvMl+giRVVh6K9FgAsxEUO07hstqR/2QqXD5DKo\n7JjJhjrP9BqZSXU1xkIFTyX5B1n6ot7KIgii9aa0cbhUwnGwcfH4bochaPze\nFjiLjVJZGc9nebbU6JkVk5BrjHMk1/OLpl9aDfcSa5uZdLciC0dUqcsS6AdE\naYIs9iW4aTu2ynWO978oL2ReP4lHxC2ujDRun6oSJ8233q64GQMJTw0jo1Uv\n6sb2h5VeIQ5b9SVqWERVlM7IxKaLiU7WLzmjG6CsqwDr6ZK40q4gORPNFk6V\nCwQ9Tzg5/YTXGQZVD+EDNmjFtPO1hRM7SxjyXNKOncE4GpRJEyH5Ud2fc7VC\nruIFCsS7pyrwtDYUZ5yCiuEkH8loeWLepUs661D5D8IF2wJm8CfmAi7ZvQVw\n2D6rEkb+jBeRb/eHEZFvYn2GoXHc1BzCHKj0odkMhTFDNwXOZk5roSoEH1c+\n5kho/t5ZvkWHwOIrMSXCuigtMD+pJYIeQyi24KWR67U7Ba+PTycIxlQHFJIM\nb/oR\r\n=VwxP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6gJ1lB4etYNRT/Z7m4XkISv+pvm8z7e3xDKjwdjVAUQIgAyOyu1i+2SQJN5Oysl9xE0kf4JXzOQ4GjpH/hIPk7nI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.25099f79.0_1586381447877_0.3215771339813842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-ripple":"0.15.0-canary.447e31c6.0","@material/radio":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Y2/RY4/yF3uORq0CmdNHcIYynCm/T7IHFbMxYZ5MxnXerkeve1U/bTRujRYzOX9qgztEBFybLErejxDm/sBCnA==","shasum":"d0a247bc06832c25c1ccb040cb46867e31490263","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnd5CRA9TVsSAnZWagAAiqsP/i4bAQQmFsK6asqwyjYY\n87XSL4e3pqzl9njS9z5CSZd3K89PNMnriTkLammFjsKiJ1jvQ+2YGPowWo8+\n6h2JwgKczMwHnGytM9BPl3eRDY8SCMlbFEKXHisiRJJrnMFql/6C+pqI9OtC\nJCAzTkId8bcRBJgaSQKmQZjULfonJqUuuY1idO4o6U+UGQ8lN7UzeJf0rt+A\n6buYfX3ixjSWw10SlibsgBZf1TFCvO2q+raRjtshmBTss6NewsrHhQymudRZ\nywzLQZfJCWST52OpDQs4fyw9k946ZuFWXfXqR9n5H0G567UmYd/vQNpHxZUZ\neXQeeC1fq9E0ioE88caPzwDwEUtknqr70vZTCCuu7HRzG+jJup6T60d3xDFZ\nmX5y7gBjZMlLqX25JvGHBLwprMWOj3eC9gL7IVbSPJrKND19ZMDHXVrtqyhI\nOdfy7eMfCBNdCv26RZJNzJfup4z08Jk9AkvM9HX6fcQIdjWcA5t9xLDI7yNe\nWuCnPLxkbHyqFZCK5dE2Ci9+slLsedJTg38MPP5h5Dp8zTBtWUORJZ5R+Bb1\n4TLIKmTj0ioq2c4yjFNihMMEuFv+HTr/MT/+Bd9VCfpm0DB0i4yBZLPEGIQl\n9UB1ESmsVzbu0qyiMxdZtGOdVMtgQEYOF+50LYQ9r6UUhP+WvoEcNFJTxiSD\nfIoi\r\n=Y3kx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnFviyAQDaEKvqsnjqmQSk2KWlih1tyrd00JUXzPSJggIgDdI9X1vbF53tG0mb2ftyYP62qzB2nvbpE9LQjF35c0Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.447e31c6.0_1586395000658_0.6625036329026308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-ripple":"0.15.0-canary.d6dd84f7.0","@material/radio":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-kxSWrzADSNj4TzWB3ebaVSLUaS3gt2tM5e+rI9G31Be/VGAKlD3AW/YN7nm20R6K5zHh6dao7AKlM1CFtg0F0Q==","shasum":"c66a5a308c608d1e4c9c37281cbdd383d29bddda","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnl+CRA9TVsSAnZWagAAHrgP/0wbOj0jQiMN705LPZup\nNYzedJNn8tDzVc15Lwc+zP8ETyTp2hmCki+/r4M+yUxXFrC7tKN2Zrh3VsM3\nOJ4SpL0TlTYt4HKf4Nsjhvi4aDAQVwNZmb/MoZ+EmcRseDAk1SAIcf5ZrNB/\nrHiKnJSmLfxFNbvqqnLou04MNYfP1w+rc63eDUj7G2pVDRZqFTdpPpGXiNPE\nJ17BixprVqixodVCg6pKjnzB6tNc0GUYTuJKMX3k6apsh+KLDAOj67wJwsB5\nF4m0SNNOhq9lLTmElt1Webyv9445daLKKQQuwLozH+rkMlJ5u2AT4dL9pHbj\nBD0+8L7Js2OQEmDmWzFJ4SjqLG/OImi/7Qnytu7ApFdWPCA8mfbVEL/vPSXk\nw7NTrEuHs4y5S913WEDPbzCD+IwrNpONWGsUhaW6ml4wjnIdqJeAHkpldwmI\nKhpXjcVF41SvYZE6TQsILd/1AI9KbvwGfnLE1fPNoz4LVIPRUWnAmv1Zfkp9\n6Od5tc3rdhVjAg7GWzq/pGuNYN2sdKhX3gHrgI8vmFpTqhI8WipNRlpLjxBd\njwhizpmpiUikHHXVcsQFKFD5fWPzR//QIYtmNd78GRchnTVjoox4lHN0EsUR\nJUNqJ7RQNfeTyLHl3W9NQyUDx/2FLlDR+jPpC5xaz95kyPUM7CztCtJtnMEO\nm3zG\r\n=riiW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmWeZZojOKFSfvp2pE6tRx75nqzfrTKIE0u9m/JKthFAiAXxux5kQGdESGXhelZ/KCf4RIyJk0WiwEzr5rrWDiUbg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.d6dd84f7.0_1586395517800_0.40396114788829274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-ripple":"0.15.0-canary.9b03ee68.0","@material/radio":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-xCTadZV1PClVVUlt/uzIR1PhDs8fCe09nCcSPW6NyPf4qvijXvM20B5rW7nGsAk4LRl4OJ16M8WGs81A+jFqYQ==","shasum":"7093666418742b5d094ad1d7000c43da81d7908e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej390CRA9TVsSAnZWagAAY1gP/3t21VDvm0bu6/cvmCHs\nPerFoZtsLd8eV9UJHj0huXiKF267+jx5zrm+FJTqoEuA5pq56GEL86wSZVPP\n+GiSqV+1z/QIEJA3EqzV5fCcY1Uo3ePl2J1SbSRCJ2BOMWv4XLTgjhIL0ZCT\nkI3NvIKV3RvyR3DF/VMVTqoOGjadyQ/IWOEMsA9NNwHTGyGy4Z54D1SavHrV\nwkNm5EG5EwtMRaVH1xkANYqCIwk2/wsIW230qTCkljVY5a1/+xvUFB+BHLNk\nPe4m+zIqaHEkX3kKcsRFbJaiZJtyoWNTg6J44AsuiEvxPE2SMEUX0e29dCMV\n9Z7P0cSLW+zW1kcD55UKkzQJXuZk8T9Jo2dQgIA6GLvZpHxEoflStxdttIOR\n2OWkFlbiSP98VD5w4xdV/je3pw31+e556JIWQtq3wbIBz6sVEEeWmWbBOp8v\nLJpoA+sR7v+hkfZwBmz/LuBKdgTJn2MJKTfIO6ucSrrHHwBjsaj/wTkJ5egr\nPymMubJ31oXkSnLTFvDxDbUAe5phiWaLu+OkBeEqr/woolWpAKvYs6NEuasS\nO4+veRoTx6hWwH/ieBarR1eMQYxvhxHBTD84TXjRHuUfTvGZPffDpztMXxh7\nngAH6/7d/eQosDaq8nK+QcqozJuWKikpcApoLz3VZU0AjIVsXcpr+4kgevt+\nuFzc\r\n=w7+z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsUtt6HvFvxuZUL385aCezmZIN+AlpHxhAWVbF8t8IzgIhANr7Tr7LWxNRWCB9acfIpt5cA/JjvGrxT5VuvODXfn4O"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.9b03ee68.0_1586462580257_0.7889370299171796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-ripple":"0.15.0-canary.bbc25b10.0","@material/radio":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-adR92MP/FdJ5iI7TPMbP3fIOHb8aUaTr+YycE8RkmMSsr7ntFxbP03Orf1PYuQTWcGPfLG//FCZpXcMlm5cR6w==","shasum":"0471bbe4b9d778a9a884c130ce78858d8baa1173","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcbCRA9TVsSAnZWagAAdUAQAKEM15POmIeByls9+TgW\nriVVQBmU9xMs7pkA1vs9A4nW9d8Wgs6a9lndpK9q62m5XJ2pMD17oAD2cVqg\nHHGy8IP34QEaLu4/6gLR67a+ZrGiSe0cJII85XdFh9gCy0dq/P+y+tagc4zx\n4y0tLhuTtrw7dL+swpRZiDVMzVLTtTbWO+4fbisBo4jR1173M0BsizMx7Mdo\nDXqo0wKqAupJ5XtSuT3jdnH1kII5pa+1Pg14sPSxRYueBwA5LtZck35ldLUQ\nDVIjHyUfSP81Ep+OfPPVmvDoYHXMQPeJbgginWJ9lqOceZHh2m/5uymPIX5N\nVNgiuBL/TQH60X9PC8hksuoXA2im1VhmiVd85J5tH04qS800tkAjFPuCRMFG\nfulQ/0ldSOIOGWR2SvRSw9Iyh8eHj2AQMO/nz8eTQaC34eAnEk6aCFWw9UWm\nd43MMUXM8F/VZngNnPoxBpcWAnMFakpdV40MfqPbBt8sfaPANJ6BDaGmJUbh\n3F7MnH11wIU/gBKQJAPqxa+dYDuiE9lMKbEEVKSVLQO2J1VKX7rLs4vQMp5Y\nASiDU0yGd7cu3Z95l+u8FzcVquy3At5deFqYUaO9hY2onbkH2/AlhvqBNCJ+\nKx9I5Ty97X6Ckan+EGTjqVVqsKQpSquJ/inqK3iDoL4/aBY5vGK3a59NjVBY\n9LB+\r\n=Oo6B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmFYTgrnlAZ/1ZUTUIFbnvoFl8pHsaI6hzlDk0VKJr8QIhAJ8ZSFWSQqxkq2RKtj0yh88552Bv66+h5jhMEvwBAQ3j"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.bbc25b10.0_1586558746941_0.19631202717408702"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-ripple":"0.15.0-canary.339cbfd4.0","@material/radio":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ElX6nOE+OTgVogXq1MhJM+/0UD4d5p3lLPBE44VZewrvVnDpDy0IascLGwxT9Hlj42ESHVBoU7A0d0TYXE7vAQ==","shasum":"2b796815171f9b0e9ef0a07744900c13ffaabbc0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0aqCRA9TVsSAnZWagAAV6kP/3kFvJk3el2gfUkQgrjo\nvNDqz5SLlMHfiJoWat6OBYSr3Uaa3L17+MH/CrayDbZolfReYZea5YabAmp5\n5tGE86m2gPXwrHJ0NJDDRFglMgMy2T0R0tW30XwQJhk82Xv0lwI+Rkp2MJEv\n+AzU5zNzCq6sXTE0lw9aqeGWOvZACoQpvWqt14N1hHOho4XMBBlni/noyl0z\nc5imhhQ/vq8fPrhFTB3Os+3divDekJY+4Z920qNpUy3sN2NW9XtpwZskC38j\nHivCWjaHtwYgqnpovCmbtYtC3hMu4lzDa6SaCJYwwNpnzO5TGxsRZRPPFiC2\nqwnT/UEGztsjzPr8kZbkSsNX2cQD0JOoBFAIyrDu/3tZ7dNWhwemK0ap3CFe\nlb6JmgoyQ1QxJv/q2jF0LeRR8i5YwN2uPSRYxC4G4clDfO794Q4Pd8oeU2kU\nKhjUKg+PWlSpkel0zR48F6w73aP0gIwzrKKYvxy0cGYn0RnfXMPDLe+pKx1A\nT+3b5RyWpkr6FOKiX3k+Ern6/BMSQwKIBkapegnhguaqxRpvNBMo+yaZsfIg\n/k/zglb08kT+EsIcXw8HMR2/U5Nukl2UVhtuY8x0AmCo9GIaPGKOBJEW+j9j\ntPFiWR6r3fvxFhOYn5fuLd92TQrdtsNj1iHfYG5NdEy0LV/QYDQIcAw/yN2d\nT/R7\r\n=9ylx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzgkmvU0hfwHyYvuMVXebm+PUH4afzKX6B4clC1/jgDAIhAI6HVce9YUMAJ6yJtVkk9pcu+G8MaF8Ar6LuAQGB+MFB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.339cbfd4.0_1586972329709_0.5520520235562634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-ripple":"0.15.0-canary.b74ff19f.0","@material/radio":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sS5ibFZhwyUSMnyXzOiQGdSjj7WJX7eBItJsp78RoHs38GIZ150UKwPe9uMQYu4qNDJffZOsE6+zBkYvw3c6Ww==","shasum":"3b4e16d8c5cca50231aed9bbf95e4f81089af515","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jMCRA9TVsSAnZWagAASB8P/Rup2ZFs0HgvDKuI7bZg\nmSfOxQ49ZnEmnMMX7lcnEEoj3lCeAtNKqR9NWq32rtDFnjqjRsNs9ie1PESc\nGpkHSRe3kYPyLNXFZbEOsIsYdtpYdd+y9nddMykkVxDzbq5DnEJYJWuWmPQs\nkc93lT13uDyOcsURWcWw5zMXNa6hxgCEd07sUiQLHNEHzg0JGU8XMn3O4/fl\nJazmIQpztTcJmbH4f9cNIhcTOivGUH58Y+iuXnWZ+B1pYqRMnaMEzr6XpI/N\ntSxt6tluOAD2KW9HmWY5Uyww852E1vnO6cz+jMvDZ/K5XRuJ44tXepC9psOC\nf5t8HHXO06CRlZ0pR8ZowqCQHdsVSRFRcPrMEHvU2Ni/01Nb59JsGchTo9L3\nJKukH1zeBCht9amhxK2XOM6uW6y3+2VRrrwhOFm1jdgV4KkUiL68CzCGXBRi\njCR35CA5okP7qPYSRWkw2kVJTlbuMSteUnQ/wfsEpwn1wNTfUduQezoLdhYA\n9jUvezG3QhHzIrm+OlfD2Dre6zQtlEeeYaPjCnUNwGac4VCvTWwyr3DacRz9\nje6Z35tHpMTffRP4cJtTJAOuRU/V95rxcE7Z+AdI/HflFVlaUNHoDuYD8Cqz\nYhXXSbQZSn2VRjZ3lGW1cLEcht8iFcrbyOFyhd+eUjwFbvqUvDDVwrnzBp/2\nZ3xE\r\n=uuic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAc1jw2NrWC99E5qHjS7pgtRL6fsWvuHAYrtUi5YZ6kiAiANwjCSh0RMqXr1+s8vlaaZj0nnb9eQ2UbNZUZvPEyX5A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.b74ff19f.0_1586981067859_0.967306684056082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-ripple":"0.15.0-canary.aaa16853.0","@material/radio":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cfKDfiPgXTu+du4WDnSIhyZn0mysuEKEViVxC5r+IBWPX2GIOgRojr2rWVwIlE3ZGO3Q9LgDXemmy3psdlRgjw==","shasum":"fc13591bb6bee6334afcedaeb0ad41c14c330407","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42GCRA9TVsSAnZWagAActwP/R1S5jR7zuVYYa4jT6iG\nwdYUYR7fA++mrzQD0dyqGccwVBt2vExGVUFs9uQVsbwMH9D40Eh4aPLBFCM2\n9JyYVbYk0kYvjTh6gWIR7R9cdABTI/2/qC8wdx3fckqaXntKdQuioYoZxtD0\n6/gMeyG5oiV5Q3uGLMrg6lLbSi0l7PcjRlSiny0O0nLC61q4mjU2zQ+O8Q6B\nB2reB4lbDaK95+9QR5Dx1vDo7IbCnSY0U6LxVp+Rbdc7KE3SubQviFOtUZa0\nyXb0lQKkdJot78IcrYFMNwVtRPVolflWvOiBnOcr/7A7dc+0LdKFdBigCi2W\noRLkHSeXIuNVjD13TwOpemp/jo99IyyUnTEPkVxv7THqxYdVK20xeN1Mn4yc\nx//PKbodMlZ8+KHtAIb79YK+jDRT+WEnspKDXb46Yn7rngKN9cw32zk++zHp\nJdvU3ULc8DCTMG/9fHrpI71XDYP26GQmAT0VkBop9ZOnzn4AucfShDEBE0v5\nSOFmwhup8I4CgpGdvB9Ac34KLayAx7ls2ReRtQVUVVgSfGN1w5R4f+eHnJu5\nLHSjQdMAeyWLpuhcxbajeunFryNcAa8oA5j/kcPgNXWp/n/FXhehuRwUwP/J\nzyI7sRXeDzGmnlFF7y/HMCVVdTY/BpQ53XxkQfSk8C+v7/4W7BNa/sc0Gd7i\nKwgE\r\n=/cfB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1wRpvaBXPMTAkPndZvimXv7NTOU6J165U4x5Gxp4QlwIgYuIOQxqjob2EodY4sO0MmcvoXXVOcq+nrALysMNsgSg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.aaa16853.0_1586990469992_0.028320502549431525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-ripple":"0.15.0-canary.826b23e7.0","@material/radio":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rcTPTuCKJOjQC/6NWLvDPbszR6O+aV4c+HEgGhgSgf9WoblCroyap7oV2W5vxMjH+yAdb8uV/sn31VgFkgdW2g==","shasum":"a3d17b01036355b54c2c82f2bd63dc00fe92e57b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqHCRA9TVsSAnZWagAAYjsQAI+1q8nKTfX20CDrur9r\niLZTNFryPjQTIuUPq5CiQWpl5CFmoUXqRXESlJPQYHkOEWBqU8X5kevQaMpW\n7duxta6d9FORMbQO5EOTf6labZz91+ao2vc7U5kcbzT7NQTRut5P/32gterW\nv952nWVW1CaMkE408rtp70dqNZEQtqNY+3zJK0emNeDNVX0oJ5CIAN09+Uva\ncAfa4FXF5Q6jTK51In0sNt5rKpIn00xx0ntV3TMbUlBak/y5Iz1RhfKhS5M4\n+WtfMvYVlW6uv/uvzvU00VANcGWTbPRD8ojXL2YkeNBMaJQgwo9z1+ULrGXO\nvDW08UBWYnDl7sLTL2hiCrE0zzVNp9le8fw7vxC6BYCZaZO2e9WK/4h5ij6s\nnCPRLsRowiIWqwAu9f7tDCX6Gu9FghKtV+ZeI7GpvZh+9HkOMBF9A7NipSD1\npf+GEhDOTwsvX0j1A0ElC6idVpdDMOCqgXHuh/iwhwnTPksspoWhYTsNkJdU\nl+GuoJQU4eE+yOEuR7Pp8lZEGw/7nTw3YiHQt9jVz/nH0CbuRvjGJlwnBDqb\nxdB1/Oj5xhNLPnIpo8l8YxVYmd8Dg5Xk4pbT9o1IzyzYCAy8vjbeKBblwzZs\nQVmkQd9RBRZAgIOFqNjNmkhga3HOM0ppPDDnVk30uZwtLccBQrHYqrYiqmwM\nMSti\r\n=xiHA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuW0LyOmNna5IJ05s4etZHqDxeS9p92piH8wK99jWLKQIhAJ5TaCUX5HNx4D2bkLrHqnjIt/C2xsSCFXUTIckv85n6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.826b23e7.0_1587063431000_0.8631118638787993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-ripple":"0.15.0-canary.e1ad2b2f.0","@material/radio":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WKbuQj73TsUOaTglezXd1/xR/q4jlU/D6KPMQ6LMSLlweejxnKd4nt6jo897Wl75qMVVtrfNnomi9yHChYKoDw==","shasum":"236dd7826da9f0232e82c568a6e139c9434b3853","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVSCRA9TVsSAnZWagAAXTQP+wXSjK652YSm47n9W1Iq\n0FnoAZU5Hcfh5gglvW5tlsAuSIZFnJtraYO4Zi7wH9eZjDqghc3e6oD3zdJA\nDyWmmtdVIf9KwkxFbEHAValER24+1ljmv5nrVb+sXTQMLTpdDlAbvXyPMEWc\nGkijvItgtZo4Aqb2XMZIbPMlAgh1SN+hVr3nCj2CY5sJapKfj+ZAxkJawDq1\njcShU+/57b9Q4ny9zS4DCMS+/e9FJVpEGDY8vNT1QNMmRxSIImyXmjZfQZ1g\n7i5FzE7x2aUZMVZG9RC5PjLOp4ikK+Z7M7vIjObwAARWJ88GWdSxiAcjtm7c\nZVbaXdue6JHH/slAUpPzu93VeMPSsX5+xKe9Rf48kwoK7X7sgA3k6mhiu8Gx\nRmRAcHx/we3ACEj+W6eLsmbrpBXkKAiHGysBY2Sscm9goOT45Cz3Ea7qDZVy\nMYjhtsTz+nV1EeT7cq9uVCXADRKAQeLwVjSkSvi3oof+IuzNNDik/shRy5wV\nLOghG/azrL+tf31GDta05Q8RoXzFrlVQbHTtpaGIZV19oIFi8MqK5nxno2Ez\nVetShyohKgPUH9tAHDWZ9pJRQldRRQGUdMOvZMXV/okwkmaKGgxGb0J5Zivz\nenn0/3bcKz5lTxbznT3wsH6cCecSKt4/iXLrs7co6fl0+HHBZRRvZ/9dgdfX\nuefx\r\n=1ZHu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFf7PD3H5KVS9Xr0bm7B+pnY7DtyT/GDxOIHW1/eKYHAIhAP5n1/Q8umSZiKnL9Jrc1GnWlLPuRLdz0NhlXb5QeNJl"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.e1ad2b2f.0_1587164497819_0.3715169831660301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-ripple":"0.15.0-canary.bade5580.0","@material/radio":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-C+YUJnoo8E4N4dfo6FHggf9njPjRlhTwQosIQ2PuZQfZqaUUJk6S/geLIhc2aLfVcYt3bNeuhrWuxdkV6Ev/Ag==","shasum":"36465726ab8b850d1c7e530c26557d6069bd0a92","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjl+CRA9TVsSAnZWagAAe3gQAKJhDjW0hvRELgwKptJU\ndkgrDYV8YGR0eZTcvaTojpq0kkV/9zZVAdyaPVaqG+njNmKsZK760OEYxzCe\nyOuOe2XreWx6dPmX19kO/OIAgeNrm8oMSQ4b4NtOlubscoQJTwVRQRyvimWe\nbSyTnCwliyfBkJGeJoDumXLAL4dT0Ys8wcIeS8rwz8a3UIHx9BpgBu5kp+fQ\n92zlesdNkToYn0z5N1G1FTMtPWLQbhKMFYqs7abUoXvkbM+3OvpgellAAFBb\nFDRQMtYu9ay+s3qy3prlqUDUKvIrsG1ys385c8YkxFPxCY5B4qk5egwjvlvz\nsefgMcdinul705/hKXJGlTwZ7qcKNsl7ElTHtO4l4hBMW7DYO3QgYFYnHE04\npuDBLZtkIGtNOjfk/6SEXlomf82IpQuYVRSpyB/qS3KQJ9K7F1GLUtljsEpU\nSTEYEWf3bWnc1OvxN7/cIk/gjjMJYTt0mg4qIaGgd8N7wWAdzJjcq86KldDm\nl1xiOqJYFWO6eQaOeNJ/HIC5Y6+lam2GtnLozshfqNfpHFTSytC+pXW67sBV\neXj044KHOT5CrAU5A6jO15tjwu2w6tCuPu6K/h5a3g0WgRw4i8wqWhVBTc4/\nMvWso+BNPQWsLfHoqmhS0fYumQ17elAq4FphnP1OT13qYF+WKypu9a65+gqQ\nGb30\r\n=TuTk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGdYG0rM9oLs8Y39/V1MEPFeKqSi2OKawGr625VPhdsAiEA4Ah1O4KE1ZqrHOE2p9XrXBPnghwSuCLtoeoPdRbQN/A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.bade5580.0_1587165565511_0.5386067777161481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-ripple":"0.15.0-canary.dae38247.0","@material/radio":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LYz+7sgblpskVQBLagLN81wvf3TWcB8nM1Y3WtyrYk2n+pXFbvlDufhPEjj+y/0IRyVMj3jAhI6AfquYejeMqw==","shasum":"e09f020923cc44e06063c9a61d6ac34f49691d36","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbTCRA9TVsSAnZWagAAGjwP/iUYzU99H44YOj10RfaR\nrwBPSRpHERsDnAmvVpkEz+It+4F21hL2emIbH1AsAr23t+DIgmrkSpca9h3X\nVNzs5YkRcCk05uFfpC5ExmHX2AyvAZDdiLKWZ6uUMrDYt4eF3MdtVs8SCrVi\nbigzU8igpVWjra5nG8YrWJRe7LPDfqva10VZi5abs4FKMV9Ma4g0TzoBbTfi\nTS+BjCvpyktZIDzLKrN1qTLI4r23Z5Y0PD0I0/LjJgJ6EKN9M4k94AxE+HFc\nsxOAE0jCaBkWUVmaxhDOQZzCyeeSldRSisiCNKXsmVIcIeHcyvvecdUxQw23\nuhCjGcApkvshs7XXhUJDzkcT8U7Kt1YWpNVy+icf6KJ6SX1zLc7gOTMPWBn1\nTHoKneBCg4mD1rH7GsKdbAqYv1zgxOB42+TJqx8+r50QZzrVDB9DI33y4zQy\nbH8VZM5EFoCrBx0dcOhBmD1AbnQCIkIl9o+nwIW8IDM4A93Vrfo91dT2WRdN\nMd4Rx/KBAcNOpUNMgPvuucuj8EH9Ovt7iAhkj5dGH5DOjYO37pqjqPYG86go\nVBePfHe6o2wAyQlKDdB08vsoo+nnnKUtF0mj4PfXedyxrLSXg81sDltud1Dp\neEF/4OnZsYb5LDVLPnk1I7zrjfS6BsjRN+hUCkyorwj3BAyQUv7KRKk/hStB\nPwgM\r\n=/ajL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwTs+rtepEDmLDoE3IhENYrosqh+X2tzBs4UZA82eKzAIgV0QWXG7BakJXOswjZ9t5tfKRlELj9mOtA5iZQYDITZU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.dae38247.0_1587168979347_0.43630129544794194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-ripple":"0.15.0-canary.a04c0b82.0","@material/radio":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-B03GdFGOISikrf7E1tP7+Hx7UQgniePqcUzPcyV8KfOBMZNdMV27f5mU5vqb/Mv43vAoYVpAhmT0xYgpPPiKpQ==","shasum":"e844da861a5199cd6807231fd973a70f09b835a5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksTCRA9TVsSAnZWagAAvn8P/imRIrfigOKsL7WS4feC\nQdrMHB2NDvNQ1UcrI50KS/+5fEhe+lcwrNhUFc3mYTnGXvnV+E+NUiat3rYf\nXVnt6BwFKXJzZLi+K4PZ0q6aBxft82X7O0UFoIrd/Kf0u8fgfx5pqOJDNGWp\nwyYqNFiXQO6XlHDev+wYYNPIEeD+kypMfUVHGeMxLJYXBo2CCtgqUrXMVjJC\nIx1adDRfCxV4kegcmKwfCMm5np/uwd9q3tL4ZkK1CwJiRcqBJClXxkCo9WC7\nIQuu5mHQd3mTVeNPr2IMaRwCm0w+npvjf3x9Wmlgl4jd+7qeR3NaRb2k5pvR\nTWbmAhTt1OM6/cjT/QYZwI3jZ+qVYnbFs8lv6dh1NMdvE8uS1Y/r1DwFAQrK\nsNZ+OhrkgjD90OxxM7kJLBbmgXA3tgcPBKrooxrroTIl5qne2mt8Du6FO3zB\nz9MOuWKjbk+oD2xIult5B94aoYhf2VONbDO9Kqr9XPAkoGb7kJcSW2MOEOE1\nNAlMecrUqDoxJTqPNJa25Q7+y1eRXDf9tf6BKxdHVCLWC4vCoZyj3psp5A6n\n8VXstuHz6CRkFYC6UekIvvW/haF3iXh68Yklnp5Z13cUxyOd42sN9WEeOdRi\nhi/0/JpeB5qBg6/DbYwg6CFKwKRRZ/lodbkKk0J/5DcqiegkZUB+Ao0MX86z\nOMvS\r\n=96Vp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYpFrnKBaejUN2Fgx02JTbLIZ+0tz2O9WA5kVWiJvTVgIgJAll5inYGuFKVql3bDujEFvIXAJGLe4XmKqMGwg9arA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.a04c0b82.0_1587170067049_0.9565977099759113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-ripple":"0.15.0-canary.715decfe.0","@material/radio":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4tg6T4rH8WJbLlB2OveDqYindRVD5XPrV3F6Grt2FuCdhnyTUjBxGGAPX3ndC4WOSVRhPINfYw1MmA1CBWUUbw==","shasum":"804f2b48164e1e272038067f23a20d4bed82b796","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetsCRA9TVsSAnZWagAAnMgP/j3FVwU8B5FQ/XoB8j3d\nYm8SSSADOTN2qRCCcwGPpCTJNsAP4oLn/AhKN6Lr0CEL/sbSLY6vuSyHtK+5\n/aNIjpFc4gJVv/38/+rsgrBV/AT1fEnECuaUQG6GGny8B1HhIL0NwSNAyt7o\nTLkhQtzkTuJf+ym8HUt9oUJSbsNyLgnNoclANkWQhRGnSu+XaGPFsSFh+qoQ\nxxf4HVvRgQxMiV9uOa1wlVfkifPBYcC9ILLgrUOD5ASkJLTK2iX5yAe237St\nbAMuvcAm7KTD2oIMeRF+hMyNCNmGLVOO6zgBnoSelvH8CzwSgYQPVoWJ6+O5\nRfKIjefgAnOZ7caVQG9mxQe5a3EBGBdZyKNS0vmc3ap+q/EqDM5PvoUBfmYB\n7Sna/OWNpgY/UVYLpuYZkMslBTcieI/W/FD0DNPMCpSa7mWY9rQLUResljFu\n6BAcCSxTnetTZrlKLbFPT8ogHKbI3YyA294ymlr+NfKC/qu8KoXPE2ePLgwe\nYLC7vt7i8yLJLWHlKipb+HQDBKCOD6Ify3b1Yb7QQrQ+8p8ctWLH4r+skzji\nSin1i8N9bPiAtV3Nd2xhrmjKAizxBZipAvyTnybzLprzFhPVHOKrCfIpzvfU\nXaZeN17LnKRCyzRytcxen7s7/UzlRvW6gSPT7mpou+2KpXTB4kGbb9AyhnG4\nVM+P\r\n=XuwB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVg4ivrrNlJhDugrPV7r4Ndedek1DuyDIsTgjrGj9hlwIhALCVHaifI0NF96A+GI/T3NaIZbPMffozThp9JhDFcbXa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.715decfe.0_1587407724483_0.042710707714726404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-ripple":"0.15.0-canary.c862cd04.0","@material/radio":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Hi5lhhtIE000GskJBSQVg/bIDVX7lt/IN62ThJ5Gt4bo6znhPtk65d6+GT/agMNghWQbxjdSeclFgnXGWVmf8A==","shasum":"e3f57f93a74d71cdbedf7ca13d6eb9a926239721","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":96488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVWCRA9TVsSAnZWagAAjksP/Rxy1TWv9wPutN/VtxiB\nDK5kJOm/69U6Ccv40vLmTe+1ndiDXLNMHAmBSd40DX20n44wZQTvzQlAFUYk\nI0eHlyF7rNh6e9DUHRnvODQ7ph1oTbQuMFm3uGnLLFETHP+lqLnoc3dujQQb\nI7GDioJVY3VYDXGgYdgyn57Xs9UyXl6DzGn52adVpm0XZE3guSlXYsAiI8RI\nBFmzCNgFSdSm1iKM8gJH1Vv1JLi1ITuzN9bwKviHEcprKBCnhCXL2PGljbNB\nwmrKPw//57ZoUk5LTzIewXGC7CzNom3pIsi0j4stZPQTvo8rYk0wURVax4CS\nzaQYKziU8U/eThFLo+NeQ8A/iwr1EXZLE2Y3ahOMgZsbQ10C3WMXTXO4nkTv\nMIFwuUlbhYyy8JL1vB7ba/qLWE3nlmJUiud/Ex/62C5i/03qmPy16LAZB/26\nU9L0JNITo8rgjAR4srId/2M08t1lijCDOxhWs9r0z0VvzBlgsA/45cWy2jzw\nM10UQqtddPuxlkNlQ/HejqOlVmycikCX+eEKFz/SLmWKvkgRJbl2qaud7yJL\nnbf9odLDppKkcf+u7aqxJTOffzvzNsmyfXy272NrbEfrdiQE6b/23oa+247t\nnd9QetfPIC7vnAeZuAh7SBNe7o5FOPk2batzq9hu9jmaSJ4F6p0ADEin7wo2\nm+xA\r\n=99+E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBwf1UEd0AlxOtwc/gJoA7NaK8VWsYLIVEiIQU5x9yNwIhAM7LNYOH+azcRDbWxkUHApZ/mw1VQ3GrGJKctd6E2Ikr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.c862cd04.0_1587418454422_0.5754177413233312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-ripple":"0.15.0-canary.e9b01b35.0","@material/radio":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EWDIZPPZNGBo8yuzqmTxHl/uAjNxyGLmMYznSJuhGhj8/da7n5i8W/nGaUccYcRuHKOHQI1UGE0pKiDt5ZkaAQ==","shasum":"6499c6dc33b7506a62c4b9b953b94b7ad4d5ceb2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBfCRA9TVsSAnZWagAAxLEP/1wFAOfSB8fTH/7uNid/\nadgAsLAK/cNO8NPjUL3hWYrn4dEl2z+cUeqn+fvAPwQh9SDklX/aL+oGadmF\nVmhG12p1sm/jMChUyfqo8AfGqE4X7skNRJ9OtUyMux95ZjBd0XgzxWQDg3oh\npnRx/HjVRHz0mg8f7NhxV38kNCUX2fPW1CpXu1YPKm6s+Ak4lHwQqrJuJLa6\n+YcYULiL9Dhw/OTZtEB5/V2snpq2mspeNPkQlf+9rbDISb9IS7Qg1vY1/yOd\nyPUBFZvv9IPJEy1VB3dIoM4QSATJbjfEZarcYIQ49z1goMd9KbNaCmTWLGgM\n7D3RBCcQlmRn+hCwxz1Td/Y1QWW9tg8xrqF5HUmcM5EKH+iId+7arLHbBRU9\n0kyL1GxwRDgtyaVO143CRZQfNR6CMdMY/HJVaQfqS+L31ObERK+nXwzqJrBh\nXxZjNhiTHuxSh4s5CjFERbKPA8/bE7KiyXhfc/7X6RrE7C2sDrtzjAe4WYdp\n0yBCHtpmW5LY5JHt5TqzpO/4MV1tA8Gk+hgCYjGgfYpVw3utR5pLjjD3W3Qu\n/Qk25pc5Fgp2u8Wr6Yy6BoXZpPiqUHN9KGyMkqUXIvLN1b/Oy66hMYcl6oah\nyqD4ZjT4UI0q9XqbQA0w3p6DtjfmxQ6PgWXtXj4t6L/4vw3IcPIgursSDZZo\nS9Eb\r\n=AyuI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRn5WX8/rLr8SCtu9g415JOI7XKysGy8uCb0d/B0ud9QIhAPslqGmlXqBV1w9q6jtcVDs0w32LDe7CSvVafNM6/YBg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.e9b01b35.0_1587425375119_0.6484689799319716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-ripple":"0.15.0-canary.ee7e8989.0","@material/radio":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CUUpdmnn/QZPU+VufzMB0aWvIgBbQFJg360v9CkyglXdB4AiNBvn1sudkwDTVuWm0cIPH2XDOKEmfDe1Hj21PA==","shasum":"31e47bbf9d4c7a30dfd7a4d7b8884245e54350f8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOOCRA9TVsSAnZWagAAP4kP/3D1WC2gIUKSMGS1srC2\n5+82wSQiUCwVE0MdD8N5E7NyZ5YvM3bH8Yve4eaur9Nt8jgOf5baJcLF6NRm\n5PHO6T84lt5VP6XN9cf/2WVBYkz3mrqmcHKisbmW9E+st6TOscVunfp/fkVz\nqnbWAT9jt5axt3TvL+UUAQKN9BsAsdnTUTtKwMQpZqPgTk9nC3+lbnqD6coz\neXXfhmLIJ5NsCZEt+d91hiRmoIFDBz4YsyR1l0MfLwJJYyLXX8mkosXlg+nD\nrPfIO3+yZsNpv2dorECS1bmjclt9AA/x5QT9XTPCi0RMPwYeaB1GCnXkeF0r\nWk8yRMuHTrhqDPdPN2c5TebwWjlMiqbQuxGMdMi2wCUL63YZe9OdKej2BvPM\n+FAwxrHI+EBmLdRjJhdwTiPC0wmyUw9Ec/ssiD2KOg+w7PtZKxRDolHT7yXR\n5hY5A8xIdybzQ71Zz+YMbZLOAQs3FvkWZ9EGBUUtIJo/7OJnnCI808KEPJrM\n762EKEozBmhU1Mj5eH1tEAcnVxoOmK6+JTT46DmqKkuR+uF1TqFn76huIDxp\npq6oJImcXzyYduqmV3UW3hc6wclw6f9Rz8H9O6seBdJXiiAU9A3xdKCT0Awa\nIyjxEejOSsn4i91jk+WqGQ0bfZy+pShL1tRnuNuMnMAdKfOs5hWK44vtseVv\nveIv\r\n=1sUe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC04iaioVSaTYnB9faXY6we9r2xecbQUgZbUsOXx6oiRAiAc60vkIVGtIFGEcVZqOvm6PkIh5OnLfyqoFQT4ntHF7A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.ee7e8989.0_1587430286421_0.4216956547445627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-ripple":"0.15.0-canary.9bf47ffa.0","@material/radio":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-H6T2PsR6QdwwIC/g5KG82YweoGq5dG+Ph3pvczlBzmQj9zNrBOS2MEacf/HxsHE7qH2dQrB04oEXRbyAUy/DbA==","shasum":"d6550c3ef3f19f1ef1255262dcf920c41fb97d65","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2eCRA9TVsSAnZWagAA2NYP/AsJ5UbFIIU2/11gaqZ/\npnFgb5a5J8XKzJMJBG+4PQuojwbUutCf8VftjrXfyVw2VstjEtasqXzXOu54\nR7+EKPbYiboUq4D7EfHjsEuHU9LH8XyYitbJYF8pqZP/Wk+mnNziicFOPepr\n/7xvaivk7aQW5Qo5LkhT2F6BpC4Q9Arg/pO2a9fHDRH/bu7RNtuIYRdPJQhd\nNBtY5+zhMgKggyc8mpRQdcjyQNvcmXhSeLoilcJyBO/QbdyPkg/1ZRzGUHJf\npDw6JUuoosY4/NLXrQX0Nyy97GDeBozJMPlb4v4A0MmWokBVQ6qlOrFv5lf4\nMHmvCEVt55gZEDq7I1x8E39EWvZCgNBnJYHRA5W4lr5QfAlEDM1fOM1h50Uc\nltal1+CN1w3VCLJqNSrjXxNkCBarIm+NiUeKH/hh+Hz+uFD/3LGaPlmnaHzq\nwozL/FYupx/XUUu6T3QRES0zKU28T8Oxt9kBss+7kr0WdnnfTcieXmDPdYm1\njZetaokBUNYTVH+KEYb2oQZQIu87dPITJ7jloS7P0tmBaGPp50qKS09I4UmP\nCLM2e6yTP8z0W9SBPabZe+OBqVoIeMTFECsBxcfjT8CjfIFJupA/o7vssOFq\nvGSh6Cu9IZj7l0HCgv49xac/teZMV4SEc3TDpmxoxlv6JRCjQETYKIul3B/H\n9zNs\r\n=PtfK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0n4yaz2DRIabTkVjIlVali3j8H6igfNtw0/h+44HfJAiEAjVAX0cDmTVpX4a4mtmFQHbqISIhfzEI1n8TmCyQ4Ygs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.9bf47ffa.0_1587494301804_0.566730743910943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-ripple":"0.15.0-canary.078dbd98.0","@material/radio":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-n3LkayEKBUIqEIaxef3ffb5ZlT1bmWsptPlS3m0d5Toz+ldfFR5VuA31NL2q2qG/hw5RDCgOftiVljQqbAWFuA==","shasum":"5830b1196286d0d812bfa7625d5d4d56b558e126","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2G8CRA9TVsSAnZWagAAfnUP/2S9IRvnQmdhMfymRJd2\nua9zqvmOYxcr1WBPQUDgt//mk/0rSocpww8pR4z3GUWXGAdQVeIyH6CbI3rO\nIKUhM0wcE6klk32drsvSQoKtd99LxRkfvYXvOTs3vc+DzjOzYHE59ZFy5g66\nGHgCHvdbszGzg/99q2L+huZ2D3XuqfFQ2STbKHyqvqgRGpJZiNo1H8AVpfGN\nvAVCByMhCmLDWh8yWLftd4r4DEz+ZVyDxMOnUewoXCydW6LJkp8uz0zP1oet\nkg8KlqF8NV5gYdxz28YNShtpyvecS8Dl1w14cFqZQxYft2TB01Yg/aIyDr+I\n1vamrfZjcfBtvaQjQrtAiNxlcbzdka0GyVS9GPJDbVN1rDSiVbrUhtObbSt1\noYy9ojK0pfvgtTtWqmFdTla4hryX97sJ+4sLV0mqH/xWAErVl7/7m1ygwNfV\nfL6oH11yB/bOASwt6UuqKmGMAqYS1aBRA5Zie5KvZ9DfCO4KlEjOcuiUNJON\nCcGySHff/w43wHsoLAJiB8c3Q/9apAi5awpsvzgcTcw6xJMMWnoluRu3UgWr\nfP/VPh96Sssmq00iYyR1TNfipT/0g/ty0oD+9ii9WaDYoxg1SlH/G53h5lTb\nsv+0U+zXjgtGe1UC8VglRpUzD9pb12e+krM5di3r9orf6I7j3f5UEmy9Cudp\nB9k9\r\n=8iSQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJhUsJ7oSptKKLlOqsV3crYOHQ+VUdJJQFeIx0UOrbZAiEA1qKmWOW0RPhD7MmUc68G4SzNjQJ4RQnPfnz5Aplw5tk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.078dbd98.0_1587503548396_0.17269828531256892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-ripple":"0.15.0-canary.953015d6.0","@material/radio":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nt88od56WIuGTPA/6DU75gxHokWQSOagYUK5C1kBtvZ/v4mvSmkdFnHjxgMwGh37Nmsl7hzvy6T+SOUfeIlxVg==","shasum":"1e3ecebd41ade35ee7261c2fa9e6deb4e2566645","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cyCRA9TVsSAnZWagAA+GYQAJvyHUAjcMvJrGVnaXHv\n9V+Am5xsKYWA/HoUNJgOYv1K1kptQHDjZ8B32qYbSfRta5/0FA5PqIHsIWr1\nij/zoV1gDfRz+hfkd72Cx/y3hBneCyxr2lx8eq229r/zHZ32XpGr/vg/Qsd/\n0+ngExG135F0olIGIXVjty+ZMsACG5VtWSKqMv7FddxZS3hMCFxGNhv9MHmX\n1agI0KEjG4Uh2Bm6YybcJTJDOCwslEfw7eInZjngvL2DclVx4PYwZOb0tUpy\nRREzZFZbJZPrObVlN06Ws8vPjkd+R7ORu6exh3vgXeCpLKUk5/nFiwvDJODN\nVl1UwFk94bn9QJ5wU+SiSmU40qCF65Rv1zU9Fux2Tm5+mZF2gONM4tgqkJsz\nDdkoYmUVTY7vV9Us2Bi/xs9+DV/dRH+uuB8B2eUMjgw07pL2e1K8vrdm89WE\nffH+zzc+rLRF7ZtXHRlPtlgTIWWN62CR1WS0OJfsQSf1FFRYx74myCXofHge\n5m5mEN623QFL0owU5n9HLqqdQn39QbLebR5kyOJSbaMK6tX/lFjGTD8ZZTcl\nlZ9rBqNig9exsKIzaXyrmdUZuoc/jOs8LH6Lze0u2KweBRR5fRfzRQBhA3Mt\n+ETSAPu6zXkGixBvg9zcJf3K50jPBK/CRMP78Yql+nXwbl9tJ25Yq4o3nLXz\niD4Z\r\n=noK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4fq0an1h0OSmYOW3b/BpQvk0lxe0ppTQidCAbADMLSgIgawmLttQqcy5KTOK7aK4SkvLYaUe2xwFp+jBmu0r/RHk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.953015d6.0_1587504946222_0.6690112956098515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-ripple":"0.15.0-canary.c360ec63.0","@material/radio":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vt1ApcN33TBAmcUF3U3mf7n9X0CCWTtaMkkZ1hz+V5PvxfUpRXrjEFEVqHmPEEKCHdruvIJq5WknfN+inZF9fA==","shasum":"7bb103542c3fb4336411a26c332ccde997abcef0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yoCRA9TVsSAnZWagAAEG0QAJJrKDFf5DoL+lUuD9RS\njFqho8o1KlsxDmzVdd99ZBlrSQc7fdAHBvdq6vRSYAnIcgThVUSpXNEhjVHN\nyC9Wm0ygK9dOmj30Z8srP5wrp1v/WLxpvQDRnyauI6xqmAqh+0u5hjNDo9yV\n+MeLq62KlViotZE+sHiAFoPtOK5DxUIVtj0u6+dQRbvQtgaEpsTiw+5aAOit\nmHcW+VABVuxbHT7nd3d7I74PlzgOx7Y8YQcsTKKhHK3gmRWcaHTLnEnYySOV\nauDi6luKU1PVXEkZYVKkIUKo6GSJt52bDmz+85TkvvGDN267hhRejTLonPCz\nBZCrI0Dx8z3iD26emeaaZvKuS6QcdGdC1CDonnuK1fbUiJfWyp9zlW3OSXmO\nBy+oZ0asg1Zd/u9fN8ekrUEsHnXOeEuCq6VsmcZzUs+7v4jSt7VNkTOk6r6B\nGlgOBCfeWqqdeWzi3eawJjsLK8AwWRpm9fSJDGSg3rpCow3piYgwPwcWsXCO\n7g8W4fuw5Ijthv8BQ8e1k6acrn7bgrlYE2Nw/pqSPBnFfz8R4MZ6l92yr1oC\nSEXVQSPlRSbycTH/Qov/BpiwREIJTvc10PYuDHwQLZKdgL+bAiJYInBSYugg\nADaZTzyPSPBDnyLEgcFXMCVxYdYuNZoo0/xiyNjscr7VsFJXpVPrvjSLUBGm\n6Cd6\r\n=zsY7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQVNUFDelheh2000+33os5oFLoRIislFzkpt7xJwZ0mgIgXA1B5fypWIMPWL5F6e8V4O82vPgfneWR//GKCsSQweU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.c360ec63.0_1587506344267_0.878206121475994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-ripple":"0.15.0-canary.d71b65aa.0","@material/radio":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9wmIV7I+MSGPKCf6eNP1e3AjOZAAdUzgMh/5aZuMzyU8/JmSiLo56Lj8IMBXaxfHqG5aBdoo+GfniLNUix+lhg==","shasum":"5f7f7fb31404d6276b74e3e641e2e7121634b0f2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3W+CRA9TVsSAnZWagAA2tUP/2OS9KCi3qQ6d9BvGMdT\nbAfUnNNkEf+oka/PoL1QjsmeJN4KQa312kJdP2gld8QQFVjHvukfO9xrSzNv\n5Ua1Hk48Qo2NW0C+oCPAzHE3AwCW1FNwPlgjA0jJV5+BEPg0i/PHJyBiGtWE\nrELOnczSEk6IbLmX5VMe1KZPAH6xUaC7k3rwMkhDHYfz8NDN7EiTV0j6M8QC\nIBAUXz9eiHBZxZIwfO+mbR3Fq5xvKBADRL1EhZ8cVdpx05JjGVoFVamtvmDt\naok2GsVv6H937KiBTE6UdlV9sTz60tznq8kVeW/WlGAMfhSB4EXUDDy+g6jj\nnMev/+JtjJ5F4lurCQD+FPCpYa0A6hab5ebD7d3KHru1Q2I4AKGxxZbw1Bx7\nAgRW1hM0RuRxyrNTlJq2kTj4xUgM59gEvoCJkq4umv+RmFRRQWogpBLMmPsx\nZ9a3WQtdG9A0gTZMLb2IGFvJtDZUmCnyMsBkOGOA2cQZ43IIMdn6cbXV5O5Y\nPpVaL3JwrDPIFkGX3ec1d+zUVStLnajnqKHpRD8emv9HN0699BFBChucdvsC\nZkh/Bqo9z9ao11YCiLHBgPAreQRo5e8tW8unHQtVcPmWz8vEj/7wr7EIjjQm\nrDKP4BhxPHoAllNPJkO8LQIB9aP8SfXzo9gcc+I5Es2PksvyFpxglx+LeAkx\ns9rg\r\n=h6Gs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJt66zY5I7H2gL68isfBHVbg9wuq3S3e2FRcqeKfH6jAiEA+eG78GlfQwgR3wCBRIbhX/RhhQkc37JnEEL5DwurK8U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.d71b65aa.0_1587508670430_0.3432036972888799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-ripple":"0.15.0-canary.58d51135.0","@material/radio":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-j2/2SADZA6FhfVaMwHgK+L/9d7mwLz7qT+tVMaRLNtYKcAj0Oaw7MqDRQw94ExvGmSwBb40+VJor1nwaZ3pDsA==","shasum":"dd34e1ebe3535db6a88b2790c9586d6250844b09","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUMCRA9TVsSAnZWagAAb0MP/10k0lKmTBOUASMtQ5qD\nE2vBGR2cj0GQAFU3fOg1D9/H09dUmvMHXv0ux+ggaQOfkcMARo6ZXLTt1ptk\nk+eB0sB5gzU2DCw6fIScw6ATIZ9XbkRs0uQVPUMko+XVkwHCNyC8UmbOkdMt\nrQwC8ihJkqUrxHTizgYVDa/2TDqdRSe6m1OE7/NKskdSMwIoe//LQuV+zLNp\nFvbiNAHvGQLNrdqXa8VTXeGo1kw1sb0g7k9WX6efWHET0bglQV4G14PQ0PBm\nqNV2jXBRrm1WKBUIuhixVutf5BHi4nbD2PkYeV5SJ2sL/jeJ4TuhYOgVlqKe\n+W7YPxFfln1rFNvuFZMGXLG1oJ2n7+HZTCaMFQhYTvUP/uEc6hrsqetLopCZ\nUKO+jlL+r81LHGpGDTiPHFY22/m4jKJoqgSbo6j7DP0bPWuwiHlI1l1FeZM9\ne4zuw+W2OpUPEhSF3JpWbGhykj82flkhdrp7kkzUugQbAX0eDrl5thez2/ha\nqOgqzQR16/ew6OoYaHTaJzwdjqKEOo428D42QdqvK3YA+v8PRusbXwNFH+s4\nYnGibvOXd55Ik2cA/sR0KkyUZ3bfXh7t4C1NemMpYa1Wws64LwAw2B4OyYSS\nOe6x3TbuwibYffxi7Ncyadq8RR2gbjv+zLenEqClfZSCnjJVAllCNKnFauUs\nGtka\r\n=+r2j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeT4ci3m9c10BLkHfF9WIraFUR+YfUSXSyjVrlzDnFhQIgO91hEmTR2hwjjeBQLBLkBJQ69F4KuYy+xnHno8oj6zk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.58d51135.0_1587602700221_0.018468610231416216"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-ripple":"0.15.0-canary.d0af8ba3.0","@material/radio":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/VW+PJakpW68+mZS/SlNoz2yPytsegKOcnl9XDkLol+WQeFyxMiuhJAE1YQL3/OyDm39V4Ih57m5aTemHJOdmw==","shasum":"9da584c339bc957a95ae78c6a0f783675b98367a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodn+CRA9TVsSAnZWagAA0SoP/jy+Ij9KHgTlVls1HIzI\n07/i26x0wPCW/fu0+c0VPBoHRhos0h0J04KChkQi3ENehQWoOftUzDrEIEkp\nZOw8NJro97JFYGtEa/XaSAcrEIlnzKwW6ouRHSe4rbWgDfD7DsVYUXOHyu6f\n9A8Mo2tOxeG73EEhy2lom1oNC+Ua7Rh8PjNxTnLjxpXLbB2sQbjD8V7tVsLZ\nMsmrdD47crFxXnHLQLf/rWOxO/PSLWFAagcvJruzCrMKpmTcyl+FP3/4VX6K\nwnsaHjMNXB5EGu4VA7v6NZ1LgrdDzf37XVu8NG2erhJek3zlPW9CQFp4jyP5\nfWE6vvOc5e9Cs0zQu67hc8fmZRWLFN58Opox8gSxxJZr2LCSGRxihgTfYpTI\n46Pf7/6Jyed+Z99kkmtBNWpfWTOcKh/doZJLLbrpkN7cAsqAANYAawK2X/Pu\n02rPXp2o/prC8SKfRLNABGvJr16lWaVPYzg32k54SohdltEdG6K97hjqlv2K\nh/hJTpfiRHI3l1tdubbCuoBlwL7hKf49M2gkD+X66FiN4MDgTMQYXAiR1sNF\nydmoPEi4aU+qV4VcyGVzah0JHgpDFMoPEVWmNyO3DAL2ji5p9d1H6YAlDK4Y\nzcXdCdpq6sEGzqX3e5x2BskBWhaHe1rZYI/ubqZ31H3cqYg4bpCMvHN4A3s9\nHi0b\r\n=2KDn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqZ9tjbu1wntanMVnrxksDhr9BeVEymy6ZwSwnQbLs+AiEAk06oqLSyXYp9kbTFHBJ3/22MTp3cnPxSj3kDHdcURZg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.d0af8ba3.0_1587665405708_0.3376624625954314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-ripple":"0.15.0-canary.8872b17b.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DDLLLhFY3vOJZ1OpwLcYnHGi1k1GcNA9hQvE2Iu4F8JY1M21eBtA5sgyP8YtZrbrumA2jcBLmVWvRs/regFl4Q==","shasum":"2ab485b3ed8b60cf30691347a5a54b251d8fcd59","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1mCRA9TVsSAnZWagAAWcMQAJgGrHQZEF/O4Ytkb1Jl\nbqyvM/2eFRUrfumv0Evt+xHRjruExNm45hyxoDo20Udd7pzyLuy9N211onkb\ngUT5C9D5xWU9MCFI5gs3hBW9mfRuZz4pz9pmCgNiSfAdeWARZIbHNfLdTnDw\nopTrxn2Gf2216BGu5KjHYyrkKOeOVZL4FIu3pZkzhsPclBr9ojgotc/AITdl\nucsGS/DELt2SQlWz0US0w42tvASICQkuO+ai6w1bYCXhFruSfaenyDRtFO0b\ntzduGEc88FGmnV5xdRKd3O3/LuMwK+5U/s0G2z7RDDhM7xgDYO5sSo9IP1QZ\n9W16f72sNTohI/ZoHQkyaBn6/OrT7KNbAKBA8P+LQx3KtEQbuXGXqaClCtPW\ntqkp1TM/eNMfogkgEZfEvANjc7Zl+Oouzqm2TYSyaXcSql8ilfcB2qgmyLsY\nB1J/1YGm0FWbb0YdWn/1k/xenxMeAOHmOV7Hwqn8sJ+75dDmTozQbYEdZdkl\ngEhU8AuC4ab0Rvoj1ppe5zTOAV289snpw8oWgmQOXrfGb7JeK7GnvMCL+QqY\n6zJCvix/QP6KmOjohLhv+Tih4jTzdw0rNuIcWLKK9eJr7PJQsiievaYLEIsd\n0M1QcRkH/v1/1BS+YvLUAoSbIsjbyYnq7HZszbreHtyrQGF71SfQckJ6cgHk\n9U85\r\n=lAaR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH48KtIr6mLkv9HmIrUIWfz41yh1PH3X9IpdcTvgTz9sAiAnSnjCp/CpjKNPVn/FCiVMaw+3o/U6xECSCNpCQtZ3ow=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.8872b17b.0_1587674469606_0.2874375574019661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-ripple":"0.15.0-canary.eca1a610.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l4GiHtZ9ogMKMYnj4xQhsjKu8fcpN+UQ4K/PZIqhRQORdzQDsSJnQGr9sWnuMrQvHBWNCYz+Wv7xIG+1LPfCDw==","shasum":"1d1d6d8db2bf543ea226acf9378afd7097045539","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvtCRA9TVsSAnZWagAACQsQAIkXB4ab9BpxWW7u5ol1\nB2eEr4UYrL7eA5luuj4jqlIV7i3B1pUCPhi8crU0n3Nnuegk1IfPsvaUeprX\nZLjWM3cDl8bDCVDOuV6E9Uh8fIdZKp9MAMOBgilOZDToo6bcOVNP0NiHsgXe\n+FSAut/PzKzAmanl6Lb4NskLAjZnt+Nt27r4/BL7MQ/h6ZtbR1KaEqwP51Ss\n6PwMcWr9DnzNpXrrGZPYPZMkyMD1i7yBbw8TyUaz2htHGM3ZRX9oLkpjN7xL\nOx+lof5aZ4JIyuDKHbs+hW0u7Z2sJiNkRpP/PhigTkpWBWgnXtbrAUZx+yjk\nyVkEi7qraqDc3VW9RU917NVGDF3XxOy7Zx7JNusaQ+eRKmVF7CanoeFJiQFp\nGgHxzwD5rRfHRnnQQ+V8LjbRDzX2AoM779aBGeDb3T0Mgr1NVjJ+EIUsLqlY\nvMNYMjs9uYYE+eWsQZWdpGA2nJ75v5P/7Lnxboqro0TCM1qy+cVOx6E20ZA2\n1fSB6so7LMKpIP+HdKyNnJrC0NQHbZDWyQ9dH+Rv9TbLSZvh3ySaw5KoUpQD\nSYmFIwaFn3o+mRoa6eGGpj3xkYrKQCBSU2RuR3psCfdy512pLDvCIQTRPdid\nWZX2kCA5VbdZVaGM9gBP1dnMX04IVqaAMaZAcoDq3sghKP5+pwQR3EN5RhRL\neKvJ\r\n=+wC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRytowdPXzckmJy+BueDp6w6SYIKpCINdMsiE4fBD0AgIgRPUbHxxzlVIVMd7lzJqm+iUPEAtembTLzKYoECKvccA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.eca1a610.0_1587678188777_0.6666607376552849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-ripple":"0.15.0-canary.baaf529e.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E/Gs9BYk8u66ZLlf7zhZFX1qVIHGcSbATz/bLx+ramR5bZ1Blpk3OU9CUPfUA1UWv3F53qhZ7zllBpHWfXMEGA==","shasum":"06abb257d4980597b8d7aba277f0d909e0831d07","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpJCRA9TVsSAnZWagAAQ4AP+QE0Gl3CqK8ey2IHMF1u\n8WVNBAoICSM+d/4+J43cS5YdXX7gAHLgHhNEDfkULJo7GH3FrfmT4nMtxjPe\n5kgM5qqcvaROv3b/xIBpjYGZwvb2YV9t1buRKq23evxGYXNzYWXkurhMLpk2\nY+7YE5LJQCbXmHQJqCPPW+yrLT4RvnglTKjVQsbwPVJk+lp3+s19EqAkw7J7\nkxPCvaBJ9DrtrSFenD+SvG+FIBPgY+MXN3FANMZ3iyk+v49Npi0BzYBakZWn\n3NWjbgvZVFCzG6HmkGYxJjLPAQpDXoSrjzN9BxNglBFWwaVVvYNndLzi6okt\n9WzBXTmISIaciNTUrTcad62eEa+SXXJ7WviUhMLP1OihT4Xey9Nc01FlFMQD\nVD01r1iTfBkdfgk/15fXu+FlAniOEgqDREwDHC5L5UXhxy5QBBf9bsOafv26\nu7vy3oAumroMiLuQ25Khg9+Xdh6/FSWvNpD5RCNQVJymA6rGLDfqlVvSvOvp\nwybP6bvmCioSYWO6kfngGks7LBOQECQInYT1lIVirEJLg1Bb0ZZqZljialIe\nV9C3YicSBvljj1rC2kL/HCeFywBExkrx0W0jEq14Rp74oND3qPF//GA3Z8jG\nyQpjtKD/kanJF1R4ncC9rzdyLrBYe1sqNsm89AGazwzmE5i6vO+IKndLh5+T\n2gbd\r\n=Idyr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAN5XWQZ3BkLSEKqrrkAdvyf3XndSwQgn+vKPH42DrBHAiAA7dDGYpnauGFoTVlnuu57Od+ut6J0+UwSaixq7UcRYA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.baaf529e.0_1587681865127_0.16552673976553067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-ripple":"0.15.0-canary.7a7992a8.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6QSHGCBERVDXl3+R8NyiwpCpABDTy4FlWqAk5EwGWSxY7kewEsjhvFSSUUQNkAPOUcA1JOlJkfsTHaxRFxqQVw==","shasum":"86133e584dbde26c7b4e876d968d5da2aed61fc4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFRCRA9TVsSAnZWagAAmHEP+gKQEkb9gKf25r2b1F5i\nMWrbvsh+3dt1nmPeihT39eXCySIABxZQGwqFYNDW6KL3lRzls/aQ1cvWvcT3\n+Yr11iwZIaNqOdqidW56WyABK5bqLTZv7fORjIN5SbFyWleMXvY+40vdwzMj\nh1TeL40fXkhSg64J6ffNw9dKzcCqyEmRHNS4wp1+2vrbN3CtSIndm0Cx6Ru0\nAUBYIel8UQVEGCMDmPxe4CP2QwWBr+OLoa5LpsCGHTpC7SQ2X/bBpcfMrflq\ny5jzJAtUiULV+g+gsJCaDMQi0LRvrfRFElBzYZVSsrYK0xrxuUyfRvtVLjnK\n162HCntAfpqQCefwcVYTsU37SEHd9h3DG4F8kxUIWlKj5DwnMTk9kSxk7eqL\n2jbecXFeZF8qARVIdPhzZ2MNsULRmfx+Hiv/Vid2UI4T7BIb50hxfmlykdIN\njnr8ywVvauS+omlcxPlxW2EePKztU2q+qPejZKI+3/GISzdITfbaNqKcg//G\n3lXJhyagmTgI9Oh8xV0fkt1hT78hJIYFNYWzZr7B0ZzfvIwZplvVAY9VJNPo\nAc/dqOBUF41XZvF8gngZuU54fAXxW98seYpI6SSZU1ry2n8WScAdalc8gKBV\nkoscL2txs5F660eOHUgbPHozeF4JD1Lk6tFNfU9996GeV24gOrQj+9/S02y6\nQEKD\r\n=CrGa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDA4n30EnXx1VCyMlDomzYf6nO1yDZZM3XfXkidr19LpAiBMlBkFbCztk2Sk2ko+AH74gHhvBbhNJF4l+bUvzcJPhg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.7a7992a8.0_1587683664535_0.14596581428803113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-ripple":"0.15.0-canary.1150d64d.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vpHEi1JyNKQh7R/WfKUN1/ego7qPYQVLwyofi993VCUD64Ny744kmIrPmVLE8bLdDIjrEZSEix7vl25R4mwhBA==","shasum":"dcfcb9c135bf54cb1e5194f8bc32dca402adb4f5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBoCRA9TVsSAnZWagAAGh8P/R6oaHcLRYkxGaolkOni\nbOOjmywxCDzgM61XV+6o7KyCWIma7+XLh6NzdXtKCFZkv+gSU5Qff+Upr7Wg\ny6BZqryAMdFFGZRLQUZPDSACcHt8mRMkGfA5xzX+cP83ADXZ2rwb//OXU8Eb\nYw6QAnWNessr5+Ru6r0V5gYPIGkN5hq1EIz0Ud80uXIyYI0SAM9u5ZVulnJF\nyqVfgkjX4PICQx2osPTnOCqsw7hF/7UxFYYuwIO9sWbzNJ8fgUhr2qPa0RaA\nSviTS9zXgLSh4WK+Y5Yyg95/hpj79Hn6SjOkTFFKc56RgchYISmJvsaYfjhD\njwdmlvp8ZqLEsq4BIX93+K9DrBiuujym9YsZD6q1zWu+DXzkxSbsmG0oMY7l\nbgN8MRmMRSTOOlnOjQXe8++ADpVgUp9Tjj8uu12z259g31J9k1EBioM2rqsM\nn7UqUQJfL7VgtI+6fHsxJxV1ijrv0wzC27wyPG5E84iW43xD2Rl4sOuSy0U4\nXd4a4VRp0PU2OtVz44HUV+a1Javsfj1Mk8r6ycM9+coTLtjrX216VoHzOAuH\nbwpdC6ZFTnXbChkkCASwHGWP02kIsseh8ztuztIFwivr50WQoQdyB9RozPOe\nHaoUwYRN3ZAzIdJql2oy9IG5xfkvvxGswuL07C9cppVH8r2Ah65HzRKui46E\nyOpX\r\n=KQBC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2oFTTY36/XhkLjisy5LVVoUhlYZ10+xsoqH5BW0WtNwIgSH63xR9GZIpz9caIDu267SDBalmc6pR8JX4K7W4W3oI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.1150d64d.0_1587687527788_0.3299315797494011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-ripple":"0.15.0-canary.dad3f828.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iflhu22rwQdbXJZdZkL08mqQAv8k7+MsvX4822CplpPK4de1u10TTzo7EG2t3uxiitlUXAIzdwVHtbZqa0ZV4g==","shasum":"10f2e73919b684af935eedc4924474a05ea78fc4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4ePCRA9TVsSAnZWagAAXuoP/iUulV4cRCkwfMa9P/DE\nG+eLTD/gNBXGh3eNXGP83FVcsTjC8Mu50eClfbWRegKyr++cEJa0or4WW6XG\nPS/hsHLbXbh9hO5I68svBCNpHSSeQitSbMKoaiUBQcDi2IPY3TLARGeqSHTm\nss+9fffVHrJVsXRj9Fd1MWZQFElAMLQ3H+UOdC5WGeefpE54vkJbydHckoa8\nm/7GzBBRpgWfSMoRa9h/bYRw1nhWHNE7YDlBjcMZ/gDmVjnjwFNSqmYJwCbL\nrVAQxt0QOldM+JOhfzdzJo2ycOMpQyU1SBRRBcU+mejdHL1j3kCAmAXob/GR\nRzhjQdWgrJn4m2HEd7vOU0Y/PoD5417tukxOuA9SVHbnTqjXVKZdftPAvGvL\n87FA+zsU0YCHmeNw2u+z+Mq71YfioDMhfcEd+LBchIjwupEcA7rxo/L/iK7Q\nu/7/gUNwl35P/fYfW7CGIxJMyPwgxlLhNbHF9AntLHGcI2rUfwB1I5DnfIFv\nQAFc5BjIMMUJh+fBpkSwLrUOMmBlr6xU3D8Le3tlFgVmxNUgNBR2pOPyiFXn\nF3gBta5IHfd1SUy64qxJeWFDn1EbKLaWqtNJpKvdK+sI+xTGhambr7NhVrJJ\np1ZWKOyr2U5XNzkd0ABOOKZdL5qBkVRRKNjCZcWp87hA9JQeEhwWxGc8QXOD\nxOfC\r\n=ApWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBKleo8kqwG7fAgg2V3XJMU8zrQL4VpRmD6aRnwn0BfAiBLCCoUH5tAfkOY2jvHVfhEjqTv0ZPHcnKkSUEHli5z9Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.dad3f828.0_1587775374621_0.7917788470948064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-ripple":"0.15.0-canary.1bcdb47e.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+ow10vQP43v9KXl7Wn10DF63ZK8JQ7dscA9UO6k+XXf7KPHr0fgJFCyyKFMp/cAbdnI9bUO63zWLonIOrLBbEg==","shasum":"60ec96bc509a332581560102b0e64bbef29dcfd1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MRCRA9TVsSAnZWagAA/k4P/jhPlIQL0WBwu4BRoTlc\nSOr8a0jbVoIDuReKEenrGh7ZaHqDne5KB3e6bLx1SZTPy2KnBbNhP1tNzr8v\nYUFjg6S1swhCHYQa7NTzyqmgq1RCvYwxxRxI7JlnDfnQXcb3Zn05z1uM4eZO\nXRDYlzQX8454QVenTxEZvC3rzIrOlc+wKje8Yhy4Di2fO3YV7GxrbsScoDfm\n26GfeVROrQ54ulPWGIdSBhhKllWa2TKgNKEXya2CPiNE1iqyAwdU/jYLjTop\nC1g7RLuymEOgSPqV4OZqiU01JAezDv+zzIf85BZxHyzB6o3NVK7bR331H2lc\noVtk8Z65ODzifEuHTkoBHoiwiRL2ljx55vtKFybpNNGX8FDeXDUd9cccWoGI\nRk/yfuGWLGJi8h8jpHaNlePU7jM3BHdgoI7/+P5WdyFVso5Qyvjpl/oi++GZ\n5Gd98XyhjRrEaC1Tlhzu+ubyb+Rn7RkBpvfiTVmTlE9uVwDXvOD8hae+8ZR9\n5FuZ/Z787vGyvG1BmG/TcJnTdBk3rFVuYfs+hVq1ftTr5eFY8KkotYpDX8zR\n39/e99nJLDuYvMaH73L2LLnSCcf3GkxXt3euVF8fwBTtI9/kod2dgRWMdyeG\nPbdgfazwQagUBV3ZdVACek5+yN2iH3CCbdYjo+fNe4ZboQRkYqcZuTNuba7Y\nkpkQ\r\n=7rvh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/gxw+RLa+9uI8+xIc/uS1ninD6jAtCJmARI+Yk82+OAiAW9B9eModM3FETjJsU8n+5bnkUxAUoLYIE/ByeQHEbeA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.1bcdb47e.0_1588036368981_0.3660906839511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-ripple":"0.15.0-canary.86ff1b9f.0","@material/radio":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-B6J2Xm9JeIRPI32adfuoDiAzlg8cghGdBItznrH+t8YWrchPuZLxBSYUuOeyF0ApqNbX47BUl/C8ga6xvcWa2g==","shasum":"e0604e8e72db0a7b94c531821c41ee54d3276826","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5s4CRA9TVsSAnZWagAAjoUQAJ5a5ctdjPOqj3sG743q\nLg1IR1Hiwal+qPQx8XDtVakWC1SvkK6r0uj7K9wqirkXCSShln4EAjLk/lfc\ntqOnwW+lyktFDsFgkuwBQglbmnU6BMFCz6XyQiZE25IcuG7bFKV/5M1ikz2Q\nz3yKUdaYkjmZefk/48CIlvcHO7uXE472R6/qH1qpNpK9FdIIHmJjTpKJndUC\nopRd9uPyt7EnGkcTHI9G9vzu1FGCHpw1ayD1JOG9EXr5GW+2a43c3K+x5by3\nq1dDV4oqvVXaARvnpFHRFwvgwgm1osQiS1VsA2OTednMnu6xSYcEdkbe8d3k\nM4aoyCOxlcxDzR0oL7BQBgXttWLqiRGkbm4cuFret8CuPHfMzFQ//UC0K/O+\nWa/kY3zjGFazNd5Top5ptlWAB0UWFAW/KGJgKbIWlzq/o2orU99ZXWPkBPUf\n/CtO/+UgLghPSq3i23zzr86YAVhFPKai+AMy2nZZGdWPPOZIm0z4tV430+mn\ntSmKTrpUg9ls8r2580zPWHUVD9NWVCqQc5ZkcV9kelNZw14l5grMqLjx/xc4\nt8V3SdBOiplH5uo3/S/2G676vzCF63k+7sjWjuaZR4Dzf+ijORYtG0fbmDlF\nf+CU0vsuQg81JuWpBt+7+rPJJI5QXSPe3nOUbgdajzesD5cH2HjsrZvNOZvF\nr7M8\r\n=fuuE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFzkzo4rRFxOvt9xs1e6LfeZrDi6h+J+MPdchMW3d5FAiEA/lHbY/GriwGCrJA+4+Y8OErPe2EXOcd+oUC01agM6Vk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.86ff1b9f.0_1588042552020_0.7072468013939281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-ripple":"0.15.0-canary.54a86b20.0","@material/radio":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FXYjkRhEUyxwsT2XA8OjuskoDil0vSUxLCdc5LDr0t4bLWZ39ACeMJKkbkOWXkfGR6VMVIwZLCMPTlXtmFJ2hw==","shasum":"a02af37d671a9fae334fcb04de23cd9eb51890a0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BwCRA9TVsSAnZWagAAJ50P/2kK3bzclYk4jK44wUXN\n5dEo+7fZjE0i4+TKn8MpEuIwCuKx2/Yt9+Q4Yz+ptXLHvVPdAFe/CgQ+3CZL\njsVR5e5/J9nYCfNe0i9jF6a9oggmY6w0xYqi096H2D+B0qxoCNy6Jo+Zajas\nnmGg/sIB3BpkBbEtY168r3d+Zuu20yAOLz+e+tCiC6HV1E7ORGBzub3KLH88\nhh4pWynd2G/kdi16Plu0leXwf3Y5mOG3mPz9VUxkLh3XIJbmyIlWnAIGwgnC\ntkc9jGwI8ESXJxqi+1UgVSHtSw1Qs1OXKbLaW1B27VqsjsNXd3YmS9buiWOZ\nO0GLvn7bVnc7o0zHOexYpFin1TmXVrmlUDQhXwxxMtPu/5B/qyPLGTSMxKSz\nMNTZ0bNt8s10VuI9Od+Tdro13NvpKf17jt1uWzd4bmc9PllYfz4Wm2G/RT+j\nN86/rAqwO6ZyD9U5LN8Vt4t/LXIkiRZTyIqb3H5Pl1W51++B3xQbSjTsw+SM\nzDaoHlTlsak1nMIJxPlHwunKLNpE6hAbd5i1yOMmXy4BHfxh9LRKfarOL3dS\niSFXItolDqHpULocHUan9f9Qa8zgRLfYJ4JPbNU+VUZl4zbfxiy4DK80G9UC\nr2uLlmdTYi+eiOcLNCPblVUFvgDnck6Fy2lr7jR9yDnzvBHTgV0WnnFv8DKz\n8eCF\r\n=oNkY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS6Q/lCFlewpBlbVzeFjZsH7MbtGTHyqHgeu7kz+g7pgIhAJxMO2UjlKU+vQD52UGiFRTJ3/q2lrEzCYzH+RvDU8bU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.54a86b20.0_1588043888604_0.12529866751244723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-ripple":"0.15.0-canary.938fd24b.0","@material/radio":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4i/q4ZIKA/ipDRJKISD/gRtLSop9eWk1brba1xOdm0+kn1HPWSj9XtS5ZVG0EzsFaQ0XXQ0FzyFHyCNmzabu9g==","shasum":"af2c037bb759ea5f3edad61a87cf8d28d5a52b83","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqil5CRA9TVsSAnZWagAAL04P/2NvcY54TjQNn6qAOMOX\nJA04qmi3h7oRoF8lHsHKv/HkByseSdz9sMpQJuE5p8sb5YTqKPcFWKDawTeV\nFraY331EUYT4lM2dQdhkwdXYyq6TXDwW02nw29Ou23XVvrFvn//9nkQW8Enf\nFSSRffCV4ST0Hy9bKw9388KIZsaMuUPWHsRvfLgqVT5OrxtnOsf92og4Ervk\nSjSuJ1s943b8aPaJh3cnxtxhTmgDlAoKIVkN0Olkj1RJnjdVipYebkXzZxbC\nOy6prdKFT/lNOYDTAAKiXYN/83tfhbaLZBQbcpZZbFZWU7jhVP3DiKAKyslk\nweWf55IdSUyov28+sFB2Rjr1LBmiSKa/X1az6+4XOwr8b7LpnUWS69vAGZ3F\nceAtrDu3ZtDRc1NDW2GNGE7AkrdLraqwXJMmBLR5GRv4sYKf9SfKt8MkIPJY\nwR2Jjcit+MvHf7XED89HAkFyr+rx9WElP6kIhfKMwYo/dmt+NxSPaAPdE4JH\nmyvfahZzBBV/TKnwdhRVh0Csa8cQvd/rCHg54z7K98F8jA4A0XpCOeFi3rbj\nf9SwWHjVCBk6E4JUoSKeRFl0bSOy5Iy6mFSHWRESA9QzZeACVZhyV/lRlbJB\nnk/In0YmmEbB2UADdIRSMUNUW3UFRX6OCUXNdPgm3Vm7nNSJ9WiWzzHJaALi\n3ikz\r\n=xuLo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAej9CZR6PUzaky8L9/cr87Ghbh6HKYzksmrf/EHeMg/AiAViLLmKyNhwV/3gtCv8I3Dk2Oj3hY7eY1TyyDeVNfdRg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.938fd24b.0_1588210041302_0.053630275191483445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-ripple":"0.15.0-canary.39e9a008.0","@material/radio":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nsWWnO0c6b7BTnwK7y8UPX+44telnCDwsDvC6PUSFEMlkkl1bpHs3maKUN+cl/XNcsjlEdF6wpgdZPIM0FDUIw==","shasum":"d8713e4dbe7b3879621b96b7639bd2adcf034466","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRQCRA9TVsSAnZWagAAAwcP/2Vi9a94B2LfKXUZxogQ\n3EvfFjQB1ED+/fbzemOoWKBLF8b6bM++/271M/XPENvnBz8DaZAkpmHRBUuL\nxxOKDzKAOHw/8g1lTiroXEUjWfuYj6qKMJ4ukx86ny15tPXkqoGDDY3DHEkr\nYSpq1nFOj0guniF4t8Gvm4TuPckRdW5Z90ykDlbySLa+vB9eMCKaRTuluepZ\nrDxCm1YT1c8SV9M05o6osmoxPzjvkBt0KyA9W7C85N0U9IiEM46DZcBZjlzR\nYaMpl3HQI9tqe6Vh6AgTy6sMHZcuFxq5454KkYTYsWLujxnKDwcNn3SCLIkv\nQ2acUsKmV/sXr/jm3wWm6+wt30YWjnSzvdS1eOvAl+Fds+RItpHGh1oqqCUn\npsIQVEslQAOk5UZswnHbL4vmfLECUt+vMPL+vRMY0SzFuIqgkdXhcdrBOgA0\nvIQfldJnsU2yiieTH/d268ZqIm1tQNlaT8euW4Pnu9aQCpFJTSHx8xB1+xyG\nRzX341CJY5vWL5D1HwAdVCCYpTtBVYWJjcrikixyPWBKCSUS7chxI1EosZMf\nh1x5TMGDbscYQmz3ghEpYAzDgxXZGdCebjMOxi+6lVjo13RtcnO073LppeUL\nDc2cx+6ExGvmxwMGwP+Fqm0vttiCsXz4el2laPDsaZOVmctrhgFHcbzHxFY+\nhjQz\r\n=I6on\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcZybBtN/MHDqL7N5EC9R5wS9jsbY8rjfYEzFJQyu9wQIgOqJKP1Sf614XaRJba9PJ/YqwzhEo0+zWUvPrrRAQqp8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.39e9a008.0_1588212815845_0.4758992354346179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-ripple":"0.15.0-canary.f3b365de.0","@material/radio":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z62xfU0Xcs/SBEeJHnwDPp3y4yx57Npas1mcC6aH8w/zJhROV0XeVkO9ZyEMNuAvWdAG5yQLne1G30gRyehgrA==","shasum":"ecdb9e666eda9c37e4e8dcfb6093b44d6d19a936","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovyCRA9TVsSAnZWagAA8l8QAJDj4byretuSNVGTgPV6\nsLEFZPQsi/CrDOcEiPZBvuhHmN4gYy0RDLUZJVoQ4bvovvck7R4iK3x/nEvS\n7pW5j1xYkR9r4nDHqzurNkjhQ3EgivmJ2OipnSTlZdgMAzafAyLUMfCrn3k2\ns271tygxejpbiXzHblEaaNQtBwcP6g99W1xNF8rybiDip700OSbNgKA4G4AL\n9Psp8zh1fZ/WGlMHpnVwHQK3koSx4Pw9ziipo3z1pD9M4qSfMGutM7z/3BI2\nV6ewrWrE5qQY1KfULy2lPl3titWyN5xAi1Vv/FwdXyVL3JYJSL+aBWukLCWo\n5L7KGgGCHZxDHNvaRHrBalWNXHgQFQ0KavImpJ6ptDcsPjwHVRM0jZWEjr9d\n6bMME0cnglXY/SH44xwm0AHceO99LlPuvTHlemanF+2wbPPoqAo5YSCjzvJb\nqHtyH0ItGnaSddMf41m5ko8AVATqk5ypXBfVSTXmfx+z2N817Qr91eKoz//m\nS1r5EzOgnHqsCqgYYLDW2q2FQugpnsL1rDJ3oydvlzK6Z40KdKduKoA0Z3Yx\no6/Zp9b7kTvdloQIBg9lZnxhyulyOIMtEmXcS5n0s7+WwV1vKf3t38iYvoFh\nuf7zHnnlbV0xKecCtvFvG6FuOxJcRjrQn+iSMv8NlX7CtSuCmkce6MfNXDh3\nM/N1\r\n=pZUg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYzNgrirHwrfoDkkk2WOOMi8TlYPKVADNCArlrYvm7ZwIhAP19NIy7nZVuQfy0hEB7epk0pFXz4+22Q0BiyBx8DAxe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.f3b365de.0_1588235250344_0.9236301123376685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-ripple":"0.15.0-canary.cdbdf807.0","@material/radio":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5X9nlgq/R4Edj6vZDPBRqdafgqPv8VjcOgebu+CYAzYePRRFLZXyyw9e8+l2JDsEOqTxcohj1uh574OpPF8jcw==","shasum":"4ed3d1f66e1d3efa24f9d197b4a571312bbc37bb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oACRA9TVsSAnZWagAAlfYQAIBlUVV+5aeJa665O80B\nZ1+d2zcHqA8l6TZupoCJu0p7QR4Y6D1Lq8tlXQtndGchnTKsXKIMHjqasRgP\nhYJ0qbfYQTfpSXbXSmP9aYL88sTWzLASa7Vwr/NiL9mS5xr647JNEoFx7ss8\nzbCDjnxyfbY9PWwybAh1yO3qP/Hpiy4M1lQRSe+SNP7z04mLTvS+DnROfmE+\n916TReM1rKIpmyyQk0vG4fy/XKIJYC2UjvriRH2QkBJnv3RE9Qa9FAgUpeFF\nbTfNjpQNOrivCaO3iOnkPIFCTDP4YAG7tHLSbPb7xNMmykbfoiuvCSoBmv/w\nCngyqw1rXUPPIVhGNVQgbiqUE9aqRlzR1cR7ikb9gxskWCpMuKMUu+yaKgmM\n4ZZXU5HU4mE/kG9SrgKmFNfYMx650jsSrRoL48cNPspMfjTS5o0h4fDTs5YE\nUpahs951NrNp+j5R6gOae4cBdnzGqyV2dNIcVqh2yXtJEBFlfMiJJzNNUhYA\nESjd8j8OLhrsPdaW02IKTFTuDr7SKigkJIvhGa60c1j2iDrqmPFwSNU4MuYs\n+arKHYGa4QxcDK2m72FTjPawTh9jyWbTh/jp2VqzsTECwG/cu1AcZt33ebhI\nwV0c4bFF7yO2VQwp+6MuCTwjPxFUUG/Ho81CxOk8KbxcXA+y7PphzTaOhiov\nyoIt\r\n=JXPN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNtv3yN7+rwU0LeNmnjFQmoofcgG02+qTlwt2vOyliUAiEAj9yHZsaCaLLYOXrpe5TJJ0kMdY3wIH7MqpHdc4gkwgA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.cdbdf807.0_1588292096518_0.9479375851393512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-ripple":"0.15.0-canary.9995ae17.0","@material/radio":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uU363REKf9RrReIS2x9kAFExNsiyP/N86X0e3eatJ1DNflnHEb+IRT15sTE3M2qKLb09FvKWhITekXgi4dbrcw==","shasum":"f71423fd114646ad4538fe8359abbab8c5f554bf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG44CRA9TVsSAnZWagAAKRkP/ir3A9b5yqFg8x7Vx9/I\nF1jnAGdtY0g5NjfED7Ve9MOrnd7HdyqH0UrHdA1POqwWq+MsdaD2RpQpCzFw\na195Ma6/yx3G1NQInlFKy7FPFiDarYrBm1kPEQLSakGf1z5d5vUPVV4rDerf\nZepIaLEt8dIV0E9fl1x/ymg/8ITpsDf4VywAxVI0IJ9Hiwe1PE6Ll3Ns1UpT\nfd23yl4nH9rBhclMNt/2YYmjkUC5ivEnEv7MudprOXLZ+qhL04IefzMATrIR\npVOKITFXm2bJdADXpZBS6PHAqv6XTGFeUmZ1mh2nKAoosXpVHfiiswdWSnb9\nyCmIW+t2um6U11U8z8B760VvJrMAztDtfCzKvgEiiMMEIV+b7N7kGg4Tb6Tl\n11m0RkSGoRQxCuimjuh1Y6JG916j6l6u+9Nd766iKdVigDgdBL3BFD39LCZL\nFQ8SVVn/yASywKP5VdbO+FHjugCoLILB6TNj0hILCpTUSfcxqlcZfuOVFDPf\nYuppjchl+F6fBoboJgTSMsCfVTujZ9j5KZX+qLTjpDErD69jMLJ1wNFs7Zuy\nUZvBv4vsnjcN2bU+9ZF+RZTb7+vo8712q5ccvrQtLX9TVfTQTAt67MN0b46T\nVm8sjitr07awXfNaFTcotSu0hPSgzqlXzVLjz6L1C+hW9Pp73M7CvQsA7akm\nmB2I\r\n=jNJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLW5a5drYgMWJq0Cxw4lnt6QAcDtbvt3GJTV3lIMsrSAIgDoSGvYXzC2sf+sMI/ROffJRk2eEyB47tmhXSs498494="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.9995ae17.0_1588358711984_0.6535004675817817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-ripple":"0.15.0-canary.457bf035.0","@material/radio":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KB4Ie43MJdYv6vm8zAcnbRONr1kpSvmqrluEq07rH/AuchDB0l5Yj8nwtiBLEi4nshNBkQu/tQD7nLp7BTTcsg==","shasum":"289ac56402bab25b2526714d70a9c3590099526e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuxCRA9TVsSAnZWagAAnFoP/2U7Kvp+fJIzqDUgaQnm\n5TAPsbu9+1NHiI+RTBr4nIEKGV3S5TkIK9EiLiLS1bkx0Ke7oEAf1G2c/i4u\ny+aUwFauJkfoiMG9CfSrZkxxqZMT8TsTI1YxOfRRLU3w1kVPQ1N+rZtJqIWZ\n2PgzJl6fsnU9lDp2ewJDLHAdxIHosU5ykT1lxrermDkvEDmMDq4PfExPcbsj\njzW6DzW6cO5yAfumshCvCE9O+GrXb9Itql0+VmMDHLAZa2k8R+xXTNyiYLQY\nArZm894j1SKGjFJlgEnD+Te0dY3vm55kSvEksFUJ0opLZWqCx6ZzYsNaEPLW\n8Daxjb1/Qa04bYYeK/h+T4PhWw8+vIt4L0cvLQpPWtyILQGPzqNaa08SerXx\nwtbH4umr/gUirKthDnwwvWieuTG94suvJ+iOhlK7aNbrgZihB4ZXr6BtsBX9\nNy4R27gfTItE2f0RfiCPboA3wf9KzY2pVVlnP2hSpXaeLJ07jwj0dWk0CdDR\nbvDFJbQVw0ulROwePj/oRqmIAiqfTXL6UNZ/HOkxg49V1pDDgqayZAkkhacb\nn1uMM5BAcHo/iNI35A2sWmWfrixyn3Y4bXTLe94srJVX3h/OI3sKTNulp5p9\n6NnFQI/8nfJtLFaKsJt8nZ+4j8+18mpIs/rhzNtsBQZ3jCXIkCxdRxZNpNGn\nAa0U\r\n=vyad\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqijrvdQXaYySeO0n+8PGGn8TWs3JBKusm4Jj6Q+0bEQIhAP+d4mpA/k1YPlC2jERO4sUIEcpNLhrxBV5Toxk1/bVB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.457bf035.0_1588366257207_0.7908195680467236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-ripple":"0.15.0-canary.2381fd02.0","@material/radio":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-i4U9/coQt72oncgtsc26NQwabF8ND1ylZwxpjl19t80PcJ1piJX1F+Pdz0SDhDTCPq0uCJ6LLtmC420vLkbd5A==","shasum":"9fa474db2f5b2f625320f59db1876fe12c3efba4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPXCRA9TVsSAnZWagAA0XEP/R82dz55iVc7QzLDbPxq\nCAbZmNmkZGpj3wsUgBXbVXOwoEuXZtSYGtznxhuD/lLulvccqcxbjNXQpyaC\nVaczY6jOet3Rm5EpsbvxZ06YJRRiPi3XAdYjYLeMKd5ZaW6bt+PfFXTbExH0\nqa7eFlauenbvNX2nRdb3nqKajzo1CVK3eDcoWqoP2uTcr7fxRXLfhWIhP6qB\nynXOUDxYg9n/mAMx7IOtZWC8au9BZ7DheI0VWp4YiYg3fKDWTU9rurpOYJBp\nN9Di40EzKktnejYHivD1QacA4gPw373ZXkKOffU+o0ZttiF/QB+39t9ZiZSX\nRTMGV+Xp8k6agAzTSfw57pkiXxZPPOGOKJVdNLll+5yjWp7R80NlJIOhiLzG\niWMwFuLUsrD2CSrNKvA+dAM6Onk6yUwXixZhL1ehRUuFyrRpYH6mLHSykBvI\ndeatwn14MXQCiIAgaJ1JKK9hLQqGJV7o8IqFV7CeozLJMTpHqly6/IgNXsQr\nh6zXDYAehEdOiDvJnJPuFmwXo2poZfLs/4b9aPZBh3QTPWglGOyNCFFpLkJU\neUgtqD3m5DMiuskoRM67G/2sXKxKlG9ItvMtZQrefWGZbIAhdzEfSWhnjhLz\n4/I5gd5Ds9q68OmcpJCUpihQIgi9u50oeJHCXLe63d7KfRd+qKYsjaFwIiji\n1WN0\r\n=M4EH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1szUUj1HlHzvapYxWa/uRQTv6wZkQhsB+JqviguDehAiADB/VfLhZFwiFsxxNgua3u4O6Qjcguj5VpFK0wCJkGTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.2381fd02.0_1588368343089_0.2599692310160424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-ripple":"0.15.0-canary.b2ca9b57.0","@material/radio":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y7Kqjc+Feqpm/R7Ijsc7je3X4Fe9+zdRAcxgtLUp/SBsjcDTCHTMIrH7Fh32f9mWZIk3WJvc7N5meVr0sc1sSQ==","shasum":"140a97e5bef27f945116e7461b730255c4a1fa9c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZQCRA9TVsSAnZWagAAOn4P/iV83B95iw7OqgKoK2yp\nqOvixKs6KNOBHeayyMS6wXDdoMA3Tep9Esu0Ivy4FIbA1zDLwFp89F69lQvq\nZ4MuGtNm0HRyYR6VF3IJoHLjYq2wImimU53Maomo/a0OBr1ebUXY5L5AB+W5\n+/qK9ZguYBhndCRw42F3lY17hoz7QPat+Ft5wKmkp05c4Uz56L5vcu4OCS3O\nar4kJr8utWTHvm/imOHMX/aivO/huLznQzWht/grqVEtzBl+0dM2baE3nO6H\nZIdJV04I7CLKz9bsrIfB/oPGcsAdnnAOtOKdT56cPlwUOYytOAUnzepedSGh\nyfFRz7COiEHBUoXHBuh7Sdax1LqyQET0oXw90jXbtvUGieCTeWgXLv156VUG\ntrYg1zQU2AdjaP701N6hrbPpjB4GsfVTrJR1Wm6ny1ROXCCOQSi1ZVxNQQOV\nOdRD1nBOk4D0soCkuYgwsCOUte0enayeqX/ckHWW+5TPVD2HnWx1uZDmFNrP\nFBytqM+QIVnfWK+oIgu0TTFqJBCxQEeCuwzm4v3e/h7+JmH2XZhQnKhXJvfn\n/v1vFbiKgHnjimhBc74EQMV0L41wXgsur2mwx+TCoL+ijgBqM2fdyzkS+Pcv\n2G3Z0r+IunA1aVvsjQ2T5AYdn5GJBg3m5wUdnJzVDymf91IK2cueEcJBMxsq\nFDos\r\n=EVw5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM7lnEtRfdWin6Zgamge24tYGIi3yIicSjT5poFqyQhQIhAMSFiUkmq11FEhhGNjYV8GYnuRCZJfAGh4bS6sIet+Tm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.b2ca9b57.0_1588368975604_0.49887624419622667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-ripple":"0.15.0-canary.b2b088e7.0","@material/radio":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YVvokJ7NHPEwOjVs4pj1Y5vXyBoI4ubw2Lj1lBIRZmUvicEVFwiRygHhQ953r6qDK6NxG3I46WdaF7jxFcUKpw==","shasum":"3fb5a1746843e89078a358dc3f4724016352519e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPMCRA9TVsSAnZWagAAL0IP+wScPx9u6674d4au661a\nSvu/RLloyMLo6U5KMT4rmHsztowr8HADk5B6yueArDfik7n1UnTloJ5kXbu2\nuLZ5J1C2gQziWhzHohAzMIL2+CWj1j67nOB0LHDqNm90FxnH+xM3eDZGWZZV\n1RE4ShS8kNreRpjNsNDJseTKJe6yulm4mp9gFHsvIs6KVFInhBNupuaL3yB+\nXsVw3qjL9fHHV/CVVAE6U3UfQm8+27XLoCRtMUdaK9itLr2jLgWcnxAK+jVG\n6AzlJKlWYSaMHOtzlBnc7HoDn5ka35RDqXVoISav7d3zVIQRLhdz4TdXkY6R\nJJFe+WAtdAuytuBhXzvYTJ/5JD+SfrNhszU8XSs+AfzmhxfGikfrtgkGl19J\nvn/VE5n7GWqOhDsILV8yJqMhIkqzH+4400MMIH6RNVyQFhGSeGrHProxOxtv\nxJuAmpx9J6oj2PJFFxDRtxklaenYMUuldNZAF7qxa+jtgqomyDQK1lZCIrxA\n0pHJMj3gwK7Hl+UrnuK8/0X3mf0/x/Lw2O57zZwvS5qJ6/OI7L2xgNqiv2rQ\n19XyEVCwBhhIGgCBHkVY/OtJB6l/qSVDjlZinfoDVZOf6ZJBGfYBbt2Xr7il\n1A+mV4iwzeYFbwep+kXPt8IU+KXPayOf3jXXISEVCPCAyzkY8FCRxbASRXMl\nsAlD\r\n=EKf5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGtPLC5hgbtk+/ypsyspN2CZTfBrcy9skty0Nc8U+cmAIgH/5/9x3q4UpYrs0H/GKpiV18dNEwSsr4uJXaqoe6osk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.b2b088e7.0_1588372427684_0.27433075009015284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-ripple":"0.15.0-canary.fdd8f69e.0","@material/radio":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DsOAp6guZljtlB/h776LZU3gZY0qwBRnLvyC36/FUvuJVQ5f42hDfX3ZiS8nwQTbxF4vQuL/S56qSd8SrIJX/A==","shasum":"d76d827d6574cd675aaccdd75beaca5d6c3f2835","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvoCRA9TVsSAnZWagAAKUYP/336tnaSNGf6NbPq4+Sf\nBhIdY5TGEKlSGp4rvpuBoUxlDhPFBWhZAZnNXaRoVgjc5DTHgrHlel44AJrW\n6TuwKBPKs/uzBc1zBs5RL6ZLUHcoiV4Ecn5UfBn+Nb0NXTg+gj7ai/HDSmlp\n3zLUOMi8SAwlWyfJTij4L/l7WkrpgkEukYPMElW2cyO+2ueXp9roS4M89CbB\naqaqHpnOhzGxKv/BE9376jWcNAXZcgyTd3m5D8uJrcXdE/r8Em3PGcj2/ezJ\ni9+ckNA6OXecweCEwS7mtC45Rd43HOdfeiW//P58r8Gf/Tbvc57mPKXNFmNJ\nZGrlEN8HYvKfdNS3Mv6jZ/cKSPTQgYK1ZlH46xzbpYjt4P5W0Uy6owM8AG1I\nwtpbZiVoqNYTsDNEw9aZkQUrjaFiOGL0hzfY4POMZiYdGqRyS8a7DifuEsS6\nXPOt52B0EIugtFpiqSPMoaONBc9i2vU2T+xFNczljyE0k/XDNYHaRKCjEDWQ\nLjnu8WKjhoSOc4v86DJyTQXg5DZBsqjLcthltYzeHSqP5no09cP4J45ZtTcp\n3wyRms6DW/3vwzu65MDNZeybJWw99AYmmlD4wv/P+xooMPhB414tD8Q3zFZI\nOArIaPEbl/VtuZA9jikyFSkyRpoQFOzAKnKsDvK6rWNs52VBsUzj8OJGh8r8\nrbwP\r\n=pg2f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDV2T2+KaIBcqkJAxRt7W5wbguqi08lkoqn0bm7izu0+wIhAJ33ivhfop7YL6CNqBF4am3YBrjmCOe//Sf3VY6Htqdj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.fdd8f69e.0_1588378600286_0.5389751739210444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-ripple":"0.15.0-canary.730f45a8.0","@material/radio":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-56Bth446sijD0uDka8co8kPwtILLgPQ8qvpomonYk4IxMOzFhC7odglCLJnpWT9Wg+peHuSeuKuaSBBo4d1awA==","shasum":"4f6480d5cd1928e79b7eec70a4b6c8c112374d39","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1QCRA9TVsSAnZWagAAloUP/0LjGKMqvoVMXdrnpd+M\npVQ2nATZ3AyTCzyXNCv0yRCOws7maBI1WVPdAWhoQW3emKuf6QclRVjCVOzy\nNbwT+G87d8w7FNT4Tz7ItiIzMDLZ3tkgX0Xs9x7Q/PJWv+f+Tfqo/JSzcqFm\nvl6zgJkrdA6jT82cYFdL1PIWVaxMBomho4ZREf6GDRjYRiunInE1ZtxGqVub\n1XqbzcApRNF0hkoEbx7y/vNuu9huz2BhwElIO3lO3eE3LNTZ4gusOj08oVPj\ngVdRkoA1r25788yGjfbxrf0qupGl8b9S4YlmicSEhikSCXa6KOAyiLlCxXXx\n+7XxyPgQiQJJ+xScKfqTDfqc+9NlITpdifBm/FqyvV9QZ93dflmVtea3/Yhw\n0+nDcG1f9CGfJ7gGhD44BcCukm1Xfb6FoNp0M1VqBc9GTf6rHyEMMSbRuhyM\nk/6VJjpTfuRBabYllAKi6cc1VuIDeGqdAoq5OxVTqdSUbj+4/6qfnJHjOPpa\nog0xTOPvXSYun6og4ugBMilEpUwYP++tRloZAJLXPUDKcdD0HA8RdJOn9BoG\n7+WoemY3QtcH4i9+k0sBFJnN4ApO3hrkopm6bGqlf961x2fa71QSUzi7jRpp\nnmp2W0FlSWk3qRXFzJJ3AGgQrMUiUTijdMCKUMDTCPb2qk6vvwR+eLQWhg6z\npXz1\r\n=ZaMB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDx5jq0jyz4T6GS0OrAI/j57foar4akOQwTulj4vmQaQIgC5XXOK0NCS2lmVMzlbh/IVH5pwEdK/MHU5WqleHoRxY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.730f45a8.0_1588538704249_0.920188526573906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-ripple":"0.15.0-canary.4219bd20.0","@material/radio":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DZnDDygdH81VrC33yhmIhR3jS3/qEZQzCfIMVGS8mAIwFh29zF6J0zBJVFsH09crTJghkUfSM0v3gk5iFOrM2A==","shasum":"d7f282a3eeda89a28893c1f4442a4d7660bdd56d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKX7CRA9TVsSAnZWagAAY0cP/1d94J9eH8/c9Ee4L4t9\nDKhTfF61SOgoSDzg6jUA8fAeulkecgXWFpRqs9K9UGWYiN4tAQ0FYZB35Xir\nzhLo0+vvcgPz164IsrVP69dNVBzBz/hFZcecMGAEkkYZSmVS1BrLJNTSxv7i\npo1pP23wIj4fD3k/HfTyv/mhJWKBhGqNfGL8I5rBFX1KA7DXpVEpyHEt21i5\nbV6YLjAAeAXkYpzliKxNMbYdn+jTJGSif91GfQc+iB6AzoF5Uihh9NPVAFM4\n37imragUXqGk+Ek5yqWLnT95bKltLfPCzMkX5ISWaBuGrD8EbS1XRqXYsrQM\n4Z4OCqBM5Lrx4EXk2ujY93vCtrQ+ppJ7u08V7ZxLoBH4dIVdXaa68SgfGPSL\nMpad3v4x1KgJukHUO1k82mOeSrv8bLFZkqRpiHlhEfULsmGlIHaZzRcB3/wX\noOJAyKXP1o/HxMV7nnnju6cLTMNkaouiiBL7YYpoiBh8RqEOUzxrh3rivCbq\nhtchWWHteOFW23zDHJD1z9OFfBGUme5KzOaBw+E8xH9Nn6Js2KOTNSM/0xkv\n0HDSp+C5C50J33DJYGJ2LD9B++4qpCdPY3n1W8z6dMWGY2/f0+jj2LnZnlDO\nHHMCwYMRDGkIbMZPILi2hyTAiuq7BJb53ipAc7hD0HaGNET40i0Cnji4+dpO\njEvJ\r\n=208W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxyJb0r8v2mPYbzC+BZ2GHgvv0tBp7L6hllrckDMNFygIhAOHhNWSa8O4uFiP8BBwzacBqU0JYVeAM9RFGAAuVmcE/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.4219bd20.0_1588635130722_0.6778282565594445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-ripple":"0.15.0-canary.1d83cf6d.0","@material/radio":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aH4PsOgCSuOb2WW3HfiE+pGhRzinDa4j/lKIfDA2cnuOvV4XPAVi73BemkDEwMiuAPNeYXI9MUopPoHh36Jbyw==","shasum":"ae170525b8a1398793768a55a481e40375e83b41","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5xCRA9TVsSAnZWagAAFgEP+gJe5NuB9S/1gclw7YY0\nPGC+m7cWgG2nKG5nE9TqFUQYQ7dAGwHexdrFaQ8Wvb5pXJ0Wzltd8ipLmWdW\npthEnwVQe9crGModM1pq4ticfoiYretTnx8WrsNyhTXw38IHIdyGcUgho8Qb\nUfz26Al6Z1AgEA4Dhnw3oFMvJDd2U6cMhglzgmktuk7pWvIoo30CvZTUIVnN\ngzcTmVfxlDmF+16GFvmb+XQcSD/CvC8kPEAJIb6VwmxArMOKR+J+bT1a2936\n/tzi/64DX4duV5OG/ByQiMeWDAbzPHbDapB5FDOdXrGHXDQn6KHBfIOfBUMq\nhM1A6q+CN/I1VPAqnge34aYZLllfjQWd06W7doCRX1lp49c1c9xs94sN4VVj\nw4xgOtN9RG85RU473J0x2HQ5IWR1C+whSKDgThGpvJCSzRyq5gUfkCpiLNyw\nOmRlx3iuvGi6OB8FpCaL0Jjr0ezUbe8olFH1n1zlvYRSLkq6NKBNtXffKw49\n91i/rVWr/EA6AS/FutR7LW09nyhpFOwEm050Tjqkvvbwm+uVCiT8XuI3bGnh\nrrvS2MQDsCh7Fhdhc36K5pdGTMP83bPULGz9V0A/uI+8g2m0DQIUOgDWK/6k\nQDa9wbKQ9WTcUDZkuJ0NXlMsG7CLtz+JyWfBjy8WcbaJhquhRhKdImgn89iS\nGvxS\r\n=1V9F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkGJeAPMWWyqjKqWwAeTN/qVlNPq8xt+BRL0wO6jOiBAiBpuU9GeQKx7701eOh5s9VGwxgHN09jFq3DL5d0Fa6ixw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.1d83cf6d.0_1588698736532_0.9200122674689606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-ripple":"0.15.0-canary.3bfc63aa.0","@material/radio":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CysiIuIsfxFDOB73/pceCm36Yc99ccNREdBAW9JPzofG1qu3wbJHEMbLr0qzv5zeT6YE4kwq3CvI4tAR6BGueA==","shasum":"17f34edba57f22d9c37009c33ccfd8429d282554","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazjCRA9TVsSAnZWagAAn+AP/jJyTlakiFJowTLO/89J\n+UhBZyYb3Bx36w8kGJHiMnPP7UJAObZKdrd7P07gvFhVLIckIe0EkbxZfaHu\nivoO7E8d3UaZk5MwrLlezrKTtsythYIPEXl49men3d/c8RgMU1paDc2g5A/E\nh81Pi8R9Nc7ZnBD9l4KdWePkcSv5esieoIDAIm3tp+U/KQekdHhYPBCPv4O/\nv0oJF5gXJknFhgd19XuQZP4WV+eDgW8oj91IV7RGHB27vTtSAq7ogx+V9LJ7\nVteOH/ev4ZoCerTqDvRmBthuWhMPtr7FejtNHgi2TRadx7pi16eKCbfwxes+\nJkJjyuWOrZ7q+oDFqMTJ64WitoM65ihFhCvGvuvjzzMBZ3TyfS4ShQsEAA/B\ne2fg0muaW3pyDnmYDMOve0MntGAbWY/w7f/OAgsQKbd5UvhLirMJ2eZaWQIK\nk1nZRIBTVLV5HyqpPa1CIBX3FBqnYwySFLJiMpyByK5F6IXsty33nwgKnfJl\nQ6nXX7T+eite/EbOoqojz80bth2HhvsgBaehmazAhh69m7v5din3r0Pb55NC\nOhE1FeHD7LKbzM40UrvDAkP0zRuaFfzTpUHPCTEd7Cr4L8MVEW8V5r1L0Zmo\nLUcAg+oDpEcHtvPU5tlS6XF4cmeZuogjRxJMgHFz973PVgsSMURnXlTr6kWF\nvVJe\r\n=fPs4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEcSBaiSLiC1iCSDCqjcdiq0Knzm77dhuae/RQSwpPVTAiAJk/ZYVU203EB7FBmM5qlyuZdhsBOtr6ulN+iQeZCNSA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.15.0-canary.3bfc63aa.0_1588702434626_0.920957371742023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.15.0","@material/mwc-ripple":"^0.15.0","@material/radio":"=7.0.0-canary.d92d8c93e.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-radio@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-SbemYU6ZvqUGTNi62yQ6p9GIOBH2WajQFebgEsSCaaxWNJqTQGCh3vw7Wbx+75ZTTjGY6VQL0oeXDKoz2cRwmA==","shasum":"629f362ddb951b331c41798214a2d347b446ac6e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.15.0.tgz","fileCount":16,"unpackedSize":96420,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepdCRA9TVsSAnZWagAAkj0QAImdt+ido3ixpajQTU4o\nLtjxTF7gBfdd6iWSC1x/h/L6xRUUAHn7mQxTZZlGzJedWq+65CMpSgad7PFl\n5r6R765Zk9YoJPwpGTTHr8hX20yZPhv+i5S62V1m7YrASoAELc1Idmz4Y2Bq\nDqZi8y9zQXzOr699wJeqD3+f722hzKnjIrfVuREzx7AHzJqyHk4twSXYN1KE\nzDP/jRdPnnntSdPGB0QB9pv/lD35li9/3JeQXWBgogwiVpyn7br9/BG9Weum\nHTArrLnof1yK7NSqydaT5a66rNfgw++y3FlcpyWf+1PWuspkgZiyunFgxvqJ\nqYcCn8zYhbVqgaiXmAfFLfnqKcS4aQYq9EuPNSD/GNl48bMOJk1t7reQZs0u\ngXjV5TCxliLTBzGAcuABPCETU3+1u6Owz/fXvyvcZOPMq6O2a1ZHOJW146lV\nA1a4LA2SIXfEaejik/NitWWMCWwRTdqzgEdTdW8NMzuk45ATlxNIhXKFsYpH\nz4ZvtTPt+skMwJQw0ziSnfeykT3Dcn+buMU+ol2qIZfTrDjzu1Noq27jufRu\nQ73ZRQDPxd5j1Iukc5j9jwGG4hvV1wxtm6zQxYpF4SsS48Ig6ZWkIxXp4pzM\np04TqmL0BkNN6XX7E9EReLQw3DR0NebBGwvjvP4PY5jVQIW2RS6XjFfmMQwL\nXIsk\r\n=MIPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD69TY9liHo/l1kvGh21lY0gdRQvICsc4bJW1Mg+Du7NwIhANC6QtViPuX+BDGfyc2OmJaDxKDlIlsCQzOIobgt23sX"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-radio_0.15.0_1588718173113_0.2947545741117725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-ripple":"0.16.0-canary.1f4e3d1c.0","@material/radio":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S/HY1nH1yhX3sd46B/lhlN+RJsUDnQVkVVriX4fwqwLopG2xtb688j0U6DhdjgcG5M6Tak562QSSmlcwpAozfg==","shasum":"1ce43d4d013dd0a9b8e84fb8c8b2ed2cb254eae7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszR0CRA9TVsSAnZWagAA9a8QAJyrapLmTDDqvI58Xjrk\n33AXF/xc/CKOiiyP5BAxucdmlfXfSX2ISbtid1hwklQ08KNKHdC09qTlVWQR\noyVk7qie+xHGoHWVDPq/smVdjpyjNfveAIX2LtotyniGXyO08s9ZTU6RmrAr\nZVXmGPZAtmZFmFY01O3ogZy7lt6BMAJ1ZjzjMCpp57tBLJgQxUVMlHY7aDqJ\nCKgfEfm8w0JMrpIOL7Ax7F9RKY6FM6+oGRYA6LteVAGkMFG3PRZ+ZtshDWvc\nzqkiYlOQ9U90bhU3DJQRaYNAWtfXl+qSWiY1T/Ie81y+fFEyJxtUBHo21Uyw\nZ7DSq9ZSfCD4SQq77sJ1irzxnDWZa9iiusO5SsfHsEG6sSCCNEdOxFPTiXVJ\nIgZgNuRGHMOvjN5BJ7dxgxZ1CYI1TR10UcCgugZx2XxfbPz3lsQcJQ03r0i8\nkB/jCy6J9mQzUIoEaLkryKHRbOtAzCs15FRdTnJvni/hD+zYjXMwMbDTzdLZ\nphOiM0ideo9igFpIj86vht2ctVDzAwqc1X/UfAyEEiHjaDzWe036U3Acs80E\nLYE23Sey/WuNBudeu4ZYG3MNBm2kZGpQW2Ohr7WhFUznia4fNh6upyPpDVhY\nw4LSS/OmValiRviXN4B+RDkCL3rOj3DAE2zgvvcb+sINCmclO53WEbN/fOve\n9I94\r\n=Zska\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5gwJ9UN0JOAniE7DrWzY+sQaWTC7XLej/qc1MitN65QIgIjrt28STfv7CWeTLniiEaBd9e7eq++/7QCkVCCOVIK8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.1f4e3d1c.0_1588802676408_0.2985338922039067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-ripple":"0.16.0-canary.bc8759d5.0","@material/radio":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EauTVx2ucGYG/afJWijxTlaHo5Sev9ulZ9hxY1m+733Fovh84nre/7+/rirm1EdmmiNu14Jb0M2XK7/3WOhw5w==","shasum":"f0b7ace89f01ba0eac52aa00a7d1c4fbb615b362","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZsCRA9TVsSAnZWagAAogAQAJC5yL7kfc0AaRiVBOEN\nz1L16hB34nRxkJ8v07X4lqYaKXWeoDWa3FD3H1CnhBeAO/qmrzuLzniolJIx\nLwKkMehREqrqqB84umoLh6EY2IlOgffLNFQxX3EB8CXZbogbBuQKUTd2t8+n\ncOYd0JV/wqhGAMoAVUMMP1KgnpOlZCe6t0z/28JMHjhweVwmPGUKapGetHwJ\nu1bUoTcKpdIRJct1DnRiw8L+sySt6HfTEEd7NkflH/WHStWWW1bphF0Wl/3J\nOWT8YgIGrp17aMJKrl4n4PB4uA1mVKcy5w5D6h9uok6foVYUSA4EiSu612Kd\nWPMqONcRKpVC7BD+hktue/Ja6p+AlakltRKlxPGFlezSOuoWW7zBWT/ud5vV\nYNrlU5XWf+UJ5qzwX+omTHxUN7U5fvoaLSAz07tM1ZqRSxpfa9CpGVbsYDKn\nAQicccSdY4gGGuC+8Z7jrRXSp1odphnd2dkr8sCm8LYUXFpbhdEVdM3CwJ+h\n+oJ+xQ1xp5r25iemvT7DCr1ydHbWSeVm49vYdKra8LHxCRvZr2kpN3IiE0de\n2UU9pfveGpJ5rF/qAiaT2DLzfrRg8vkT7oLxp2F44+HtQ84gXi82PgbdzHZL\nED0EokECs+tdVCGRZDFU5C1rnZWtQBa0TZ1ksgxEe06+5fqzHErnRdz3LSAL\nwTAJ\r\n=LhdZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKB+UQIbFkdE7R6e5aIqe9ByROZjylA8erww7C4E08lAiBWcTT2EfKutg+YqZZmFe9IJf9H/Fl4dsYMPaINUYGpbg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.bc8759d5.0_1588893291642_0.0347162164119621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-ripple":"0.16.0-canary.d1379acf.0","@material/radio":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-F3+UAAgywzUjIMM0jktKSLd8+oxFTN5Kmk4WrglGaKZRGEFJsVmI/4IF50zKZOn4pNegxTL6JxLO1oTrHLDtnQ==","shasum":"0d5af49fe4172780dda2db08b88a7d6b8d98cd1c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnCCRA9TVsSAnZWagAA0tAP/jmifNRBLIH8JPyvzeBh\niVV1DtZqSZLB8VS2FdRZ5Tp6DS0UraRrbPW9cY+qLYZmQPfzJsugbqNgATtC\nMMxYoRm6w5SZQTUOpDvG+pKCZebqd3UKtO/f7DtVFrbCyT/o5JBDh1ikMakL\n7yV0BYJG7hb85cgwgh4/6axHmtIDegld79qzxUuExzW3rAUPYpbFnpMOUWR4\nsxX5fCp3ibgV5Tj4jXEG244wvOoj3+HSNlQFESj6uEvz8nTAKiV0Tat3TJAA\nRC3HknmFWsKWFjAGqTAsRXFpLWxEGGOKo+Hbz3yFJEKBWmzOXBM+6G4nQfNN\nWPEAjslXSskZPw1DrKsYIndd02eW//2p6bSyx6OxT8VOlRaCCyionLH98fr3\noQLpiIwqwIa8k6mSFE39QsgqVGPIUH87idt2qYsCoGYjA6BilrWGe/2ODYdm\n8IsOe5pNpltKjfiXGyF0X78rjgzKdjvU4MRg61aUR9e9ATY2E9PlucMDC+tj\ns8HPf0KetDpt+xfRkoww1epWwCrQ1VwrGPdF9AcikrpBdm+bmi5sJeNQqz+K\nszjYCCm37blXo4PRdXPBXhN7/8c7yV7M49b80xv/paZx1dk41DVN4ZQBLg6R\nOvV3CAK1KMlt7bsEBSusLZ5El75i/FFzwDJXnSfw5mnDWW1FY0tBFFJk+5hN\nYrMX\r\n=t5yp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEt/u8S8qt8buxeiSyMEpSBEpqrESLELXJtdwJvcmRYAiEA4hyoe1K9GAbVWvldmHfFIJCLed3R8SPZh9CI/a3BlL8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.d1379acf.0_1588959681695_0.5214154733159759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-ripple":"0.16.0-canary.58d51fc0.0","@material/radio":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7O1NZQdZe0gbRbAyAB8tLjYQyYtjhH0XkWTZEGBNm5fT/sMkAUAdtF5AZGitR5qFHebncg36KAeXZpFeL+M/8g==","shasum":"7b293cd63ee39e5fa96f7ddf61d0bc1d9bcddb3d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBVCRA9TVsSAnZWagAA+P0P/3Z8p/CsekpXlB/AVDXo\nOamTZI+3DcP4VyZ3ksBr5TdCK2TjK+koRnjJv5OnGHehonVdPxrEIpWfs+7Z\ntnTpW03VzLUbrDBA0KBxbxYRv8qQLjbr5dbRQCAIZ50qdMBsS6PIjApEFOlV\nlic1WWtZ6fnF0u2UoV2sVaZVaOC5x5/rwvXdCkN2SEfJZkrHvGZLxZSayPHg\n5m1O4usPJud1llje53CuxeycbQgA6QQMw2RwxUSAFIeO3Gd5SZq0e4eejs9d\nk12tb0iGbT7wsBt9VbJZmadXIlKDNsoIXq4r3BVMropPzN1xWx9tkTXq7Sto\nfnZu2GnVtcsUp98omlaxi2gaF7iZxUwpOuaya3Jmaqq0FYkQ5YSb5Bl/5SUb\nPZi+3kKBNJNMsML/JmanQ4gyPFL7XjXAfbupW6Jj0fE5D4mWRzWBrNSK/Yrw\ncQMjCIvM076rXHx7TeWlpfxuo4/UA0QZ8pcQ4Ytg8zJ9A5emZv8qZpLlK4wi\nCpDsSs3G7GEsWt3wuQryazYaWIduqZDJW1MDZG0f2q8l+NZPtdtBTdYYLnJw\nmzdxR1jVIQ+QyX8hzfG69SbMuAjCgEyCvUaNrcmL+BsbOwTjJkvpbwBgfjIl\nVmBuajE98D1qi9BC8vfY8ZXcFoXCbc9GxEq61zKGRn/bD+OYGvBFBfsF9d+q\n+JiZ\r\n=qCit\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9pbfmgTvuNn2NCqJi9n93ai1wRTEy0zZhsU7VRZ3uMAiBWDgNesqhQeMDybKCTzB3b0gucoCX8GEjkTC3SHS/TLQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.58d51fc0.0_1588965460337_0.4385809448542204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-ripple":"0.16.0-canary.588062d7.0","@material/radio":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-e8q6z4awBLxk3TVSG3R474XAHXDD3QlMZwDot8PvF46to/uqaRQ5Xs6mmEdqLJAv+X+5faMPw5nRVdVkLTgsUw==","shasum":"0a5097ecb2b042681a78c05f5b7e3de8791ad45f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3oCRA9TVsSAnZWagAAnMMP/iW/rJOE/W8ukBtLIJFJ\nAjuk4RXRmo69WMssJ78bntcCihHj9tgiv/5fOwD4TkdguQeH+EuXXnn7XzLU\nmRbrsbRJbEFMYycKUQUwlz2UBFKKVwO9LfBOoKxn+FTFUL3VywL1itQemtZ6\nCCemv0YzGxn2i8C5DKxY5saWPcK2uQjMzR6WTuZq31XFHOXzXjZSlf6Xm0CF\nfHZu7sXLhU2vyDD0jEM6w0UCIT0ylEC1de978LGkpLUe2dKU5XJLB+fEIZgn\ns7o117RlMZLDGtlXcfsjPbKlaT/JufBp36Fiws2R97i8R1TM5K2w6ddmyV7v\nw9AdgoS4xT44BhUrgt8lWGlZ45mYvPUC1u8jLYuc9Mc5XbE0xEaBZz/CVjMD\n5chEGH+kK9fuiZmJUt9y4TkYA2JJfw/Br8tCUg4om38oyEQgnKk6d8SLYi2Y\nODRgnsv8VfIry7N/uNnvAr8zzamD7v8O4IJ9fL85tfMTpGaGLpdIOrMtbofb\nW/muT4J0g/jwVwOzfaZfpb6C17EciyjN+TFIhdkPnUPzD93j8qYN9QbcruCB\nqFM2qfVYF0boWK2c5suZcd2C/GbhNdXseyW0RGgd7LPJuoUpdF936wDNDo7j\nfS1Yiz70QR3H4CrmZfUt4yhfQuqUOjOeY6B2aPg7+nLZqTRFs9/WfEJHgaVU\nAxAb\r\n=CotF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMEbT+zVFZ25bA6jtAfnoGKiNIEFmr9I6U97BkQhyUHAiAtP1+lqKNtHV2xdma49u7GNL6NMX8jIZt7zzYmUphISg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.588062d7.0_1588973032553_0.9371198367172762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-ripple":"0.16.0-canary.fa21f639.0","@material/radio":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-x6c22fgTGmS/3tae9vAyjMVTp+PWR+ae4E8YAPyqYQNOyVxY2SP2NsxiOoQUMQ+JqS2mnuPdQskiWxVHrB7akQ==","shasum":"f744fcb15e149a3b56ea2480b5f1d1146fbca595","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYulCRA9TVsSAnZWagAA6D4P/2/HAwT7nfZqsZKRg6Gg\ntR14qJBhK8t96q2uyWloCx15OfiaW3J3DEop/tTuilDuaSXea1AI7Uia/KOY\nT+2oDhjfu4CV8byX+ttXLaXql6RqBRTBpgfuZrCzwvkv7rJ3kl1RFXSeNaR5\n7Gxn/VbUkHx7/vkeOG94DKFUSpo93W5QtLalLSKxJwopR4zWTo1CVlnoOC1g\n3AguoeAisYd3SAzNfQLlQnYvWrHTRrlzbNgmA6llAdHv67INMrnRX8xqNr88\nS3duPPFqt0HWGbePMFCdUMTk6bRufrLEqXo+uD/6b8tMuuJxwAYWXi+n7A9g\nFDQsUK8eZDAfHM79w+cgvgwHNQXjsWDAVXpNCz8cvBX16P6O+j3MHKxAWws2\ndFeQax5rKAXC5ngm4bGv2WJ8dsOpNP5v5b3zckW8Ji59URAo+zwPQcI/bABy\nHLOUCzdwEZ/8Z/Qqa2Ewtt4bfPc0joFhrQm0iuHCr40RvNStWNJO4uVSQ7QH\n4qvekiCMsEDswlwRy1hA4DL+hVteVTNJgake/rGKaa37JR2J/pfMwuZBwUBl\nX32X9e/vpdGxjhHiRbUMySHHSWRLBYj205IVcR62qPPpqLIbzD2aXyKX0gSW\nPa0FduCXDAE8xgT0XvgNHdF8CcXbHD/JohYB9+eWPTODi2myRqYRN7LAOf6Q\nSn3n\r\n=PRhT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7QgQXxgw0i9dfBMrf2aUq3ZE5i6JHSc94fehyk0sLFwIgNvjKmZ4izUGOa5ZyjkclBgno7bSFJ8t4EYeiZyRDUFs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.fa21f639.0_1589218213091_0.6738694137648404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-ripple":"0.16.0-canary.2772c509.0","@material/radio":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mf0U7bJDBnYpzapo+PHnppC0s3AgB5T2fWwAVGGlbk1b85dOluBuV8itgB3bDCWJ7nL+8Lbt3EDDoBWC3N/rbQ==","shasum":"dbe753c32bf24566ed22b3e8e1365291780f3037","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtACRA9TVsSAnZWagAA+eYP/3+r8WTvS57Qtd47iB39\nLMlhkaP+Djqw7y5noibYD+6kkyeMNm43va6M9s5icyMeZ2Ukoye+Subtjc21\nVQd0dgrjYustdsF1ZOoi72lJoziCWV4blmb/U8Am2kXYtcWdFlKQOy3YtyzG\nDqJ6lA6Ms5Ru3pYxL5VONv/minD2N5JXd1R2WO32xvcr5pxkHsKEtfvXC5bQ\n76bDuKR2ESWjHaiW5hXyrPjFzUQcxnuhFBikB+nllKLPjnaffsLC1LMa1hFt\naIMijiixE/tW6SJ77qJqNUt/FowzTNaHS09Nlgu8E6XdXX+UJbAqOdbnJPD7\nSAseVIjGxpj1XrsicmDL6fDYWIdcg/KTvI7lrQzd0Rz52ENIuekGuEVljgRp\ndoHrvJ+DCEA44bWXxG+L2B0Bf+8Upm1kzywlRM/aExGz58hiKT4ObyJsWmIh\nBVHF+y2kYvooQTPm3k2lwnfknaZb49xcewCoz6cfVwvR7zoS6RqY62QFxa1o\nUtNA1jgBkP90ORXa8JpQ/7UsEtEMnd4d4tGc/TVVDIuHUhfxMdGIr6mJwHfg\n8nEvbd82VZpQLypGZWcZ8pEqHg+hw8UjWPc9bR/qyz2wc+FXgTcXWXOg+J2K\ntN2N//0fFOQidmy9HRIKFdAb6nvXG1wiZYvdXgtgXiur4zvICtOE0lLi1fmq\nsArj\r\n=dTqZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGj0ITdMqCg8ZUXBQv2OpfeVl6DPRcczcyJ0nfaRVq3HAiB6wt84cD9kWVnr+ORRgbIApPrRWxx/eWJAccEz1V/4Aw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.2772c509.0_1589222207846_0.15622208416083483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-ripple":"0.16.0-canary.fc4796d5.0","@material/radio":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KOF3bMl3K+9mKQzcm1Ug2bTJe2oBGUrftdKEe0UeqSHVt2HRc7QpjRmuSgjv+g3MCY6twhVeSQvh5TlooyeZpA==","shasum":"6f0b8259c5e001721000d3559d3bb8109e3fab11","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubAICRA9TVsSAnZWagAAGOkP/RRveorzFdmfQnykZW95\n5H+xygAfnsyS9VRCbxbOz4wkPQd66fW8tvn5hGO8FymLd1mlBd4/1RqTkYOV\nBlc+vZqNykNbNxaWeQhfWFO7zmKmzx2VwagvzrEmYqwK93h6qTsGzn9oE/8Q\nyo0xB20zcbXmLPVVQi3llsFiMzJiTql8VdhOazL8K7ijsBOUmVMs8Z/jkWMP\naWl4el+JOznnJ+mVnV/jKv/H5p+484bH4sZJIvOfh6+9BXa8XN1pQtLG0Qou\noN6fa31bk9/OMm298Hy3ekJeOP0Wzeiff7QGRCbQ/c7tngfPCbmCR+HdyHXi\nlKmMufD15pQ1Bq/Ctcrmsl9P89eHo3I/a+bb0/17wF6KKy+nJA2MgwuOgs4B\ntxdPIu2nvZG9leVCzfjOmR4Q0Io8bzQhdU8EaQFXjamuu0tWfy9eaqZVKw6T\nQoNY4U5hVrtxVSkLKn9PnHRSOmouYGZX4/7jx57lN64Ct77Vidji6xrwvRad\nzSMIAso90tkNR+TUGBqOsXSRBNzBNiTdTeGFl+IXbuKxax/SRAJYNVI8LKFK\nMRmeHbQn4GQKFCiC1+ZGU8d3JSFj9sLRZAefbHBMNho5XZK+Dq3D4WjtzXw0\nMAZgjqy2cBQqTdGSVX/inQmXYyyRBfdt95uaCN4wHHX3wv+5yezxV/tBkk70\ntNLH\r\n=lMJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGiZYcjoMe43tngYEpfxbk6vhuculDxkZyIqrP++So4xAiEA5VGo7aIS0cfkIVyltRcrbE3qkoEyPTpUGcnJwAM5LQA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.fc4796d5.0_1589227527638_0.15087460661843632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-ripple":"0.16.0-canary.0d1c5f2c.0","@material/radio":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6cWbIbabxK6fVHNumNc7LACHlSKY8VOPAtAoBkEHSYmRo5AjAF4VAofv62vLJyGg0F6POD03pgwBFHNfToAHQg==","shasum":"fbe3b8a89fab101deed0000ee76950575fdb9acd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucF9CRA9TVsSAnZWagAAK6MP/0IerBqYRatMHpUURz5M\nutpSpYO68sj/9ODREWiQMYXhuAeSCI0j7viYQqWqTBwMJvBqMJhiRe6eDTn2\ngm2ulDq+s6SsO6ngWjm31YFAu/JjzgLooC10TdcWtW7OZgnWgNwqd4VWERIX\nrwWyr1aN3VCibzrrNWI/I4SfRwjNJJ1bG2qfOCMR+qw7ILnNk3Tj8tkWmXqD\nd5nPQWXGBV2ECgaDLmpR32ZF8i6h6RT9DCbIjkJbJWamgAtGcShO+Igx4UQG\nIay2ds7hnBXKP/VwKSMCHXbS68UMufik60M6+n27Fy59iDpwrmS43i9UZsB0\nxpHYptwnKXETviOuRVFhCZjz4Pksh0/AA3us2K9sanT8F/arKeRvy7ab67Lg\nZ/vSFAixDsLCpIjyrvhf5Gpx0X5RyT4/O1Rgw80ntM+Z+HUm+nn1JpYseJ8o\nR1fBiSJxiBycWbvHEvMVyB7vRJ4e5VpqS8dyFq+tSVvz11c/TJ1bfRxTf6fA\nrR5hTP/rgyFodE/5H0vdDDkVob7VMP1HyZ6KWZhT3KnJyY9HOkgcLZ/B98FZ\niaRGF/wP2sg5SkQLWjbQauFVTk1+pv4McKgA2dHW7WO9pynU71RqVIqQF6d0\nrWNMx2dP/arfRHxh3Wd6MQUUD+n1q+We9KpS0anr7U8g4A5QqsPI94tvIhLM\ngoE2\r\n=1HM1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSbi0SUR1Brd3jDDBcD90m0UN99YMBMYxyTyT/lGNEmAiA1eOLq7feFrpdUFNxq8IhH6JXdNbY5BMfnmwBUVewf9Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.0d1c5f2c.0_1589231996679_0.885810332645949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-ripple":"0.16.0-canary.d083d93a.0","@material/radio":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rZHGOBBMJj665SF3Vf4xbZo+XhwpB6B/j50vm9J28oy5fXG2Pugj5PwCajMlYpstkqjVThLbfnxC5o/AwnGvwg==","shasum":"6075292f264afdc638fe540ddec2f35cd2ab7634","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetQCRA9TVsSAnZWagAAt+cP/iC4vu5zRUaCDzd1DsSy\n2CxIng1tXERRC5PMnRKDbjx+SXESf/+wrS/q3+CJ/egYkuN2KHnF4uNdjTlA\na/K2EmrR71r4C/mt76zty8qFYpQeDFIp4f9DABGc5FXtPm3lUMNIbqszEIVW\nsZBgsXNjA/SkVaVNqrzoKwuR5Jf+Kvck2N8OSNEA5abua09ZnAmUst9aQSZa\nk+/g+xe25IgMHykFoBsBv0OQZ94qG752j+lYr5KFBmTTVtodpZj+UQl4ADhQ\nfZ/aij0i+jEFpMaxr3GmDbsgjUqAaEA2HwIwu6mUwExtThPCNeWiQ7fNiN3S\naIZ/PuGgIHQAB5v0+56uc3hCx3F/NnVoYWmfbM0HKN73YN1Ham2vn+YF4WMF\nrInpdltKqOTaySENiyTbfNtxsZtX8YdK+gUBcIzaJbiJd8XUdxASIF8IQ018\nVy6n7clqcFIE7IGm9v24q9kmwN/JoafLK657wl3iNRZFmLIy1c2pBBoJmtBN\nD0Rlv560hJ7b9oDUJriyP89kN+B4o1p5jwkV4V3LqEcPK+i8xsvscVNcBB0B\nAj0RO7dBUWi81X7TUXWuYWzU6qBQRFpXoHPIXdfsIZAQnHDSjAqK4aauxCRX\n1ajDvifxr9ikGKsAl+tiy8mL9hnJqXSL/5apYKo9Enk/dkHDRlm2aupa1FEL\ndU2D\r\n=Er7y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAy6W6o+6jTNe4bDk3A3PvHzYSOfqsGFbHsD18R2QrtCAiB8LFFWuwjwXhIikmoI8GSR2gxPLadWzbyS0NjulIViWw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.d083d93a.0_1589242704070_0.9449276948260656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-ripple":"0.16.0-canary.c95d429c.0","@material/radio":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FvTAPGP0RgaWXtiioAzAUZLws3zNpK0k/kIKAejSDnOgDzadOusXXtfCTK2zv9UdUFk+GSRtA6kZovkJ6Qk3Wg==","shasum":"6ea6143d75cd0abf39d2ccb112df9423d54475f9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcCCRA9TVsSAnZWagAALucQAJcibiUY9NTrCr9q57IR\n5ZM0dnLxwt3TuDKgsPudaFzqKWG3Kr1bZdEVimu+dHAAyWdzNzkbei8n4b7Z\nXLzj9X/BFQnHq37bZF9pbE5jjyMN5HYOkhbRQm34EpdPPLgk5NgWwNt8fsl+\n39zau9JoBmmn2ES9BTU7caCmLqru5gbjipBECW18F6/qSGU3aNjOIXVrbCsZ\n+/G2KpFrDc3uWNa8f7Tnzrysrkoy2IIiPmS77m8cG+W8OTVvDI4dGdoMQlS5\nzKVvwT78C5Xy+6VI/G+QJGPkY+VfH1uQt6W9csaW+S1S7iAHY7BfDib5DOrX\nwmxRAieItSZ4NjVJfzspvyAWCiz7sQ1Ge1vgb5RIXS7NBfYcaE1qfbIY69Bh\n7d+RfB+dAqrK+dR4nql90txsSCss803G+aT/E4D+O1k7n2P9N5q/AtzUPqP0\nS65hajJWUoJ2BIKb7uy8MBHVL1lWgDPLODgVBsU7BADx+BthQP+eoF494u3A\ngYSSWYZIS7o6KxmG+nS3Iw0/jaHXcYHKt2Y4QT+VlRmnz64+k4etr3qu1rHT\nDjSsgKHKCKHVgrEccepVdGCVLbUC/R9Yr95I9MdOSb+JHCfDYkrGjbFV6RSH\nMhu9g8RhLSBNxgoh7Wu3otas+tCQ8xcpNbjmQszKroOzYi/wTwrbZhHjgHjE\ngcFl\r\n=GfXn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDld40JqzZvtQJv4X/wL8MuMwr8QQYZlwtYUp0BFphkQwIhANHobm8pmEBUBJGsBxkQQDRVFafSFHmO2QaW4xu2pSa+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.c95d429c.0_1589319426061_0.009305834959213888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-ripple":"0.16.0-canary.0c1ad726.0","@material/radio":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y8NNi/xqnf4/ir4DdFmY1m7F9oZ1ixlEFMDaFxFe3xOtm8vv6cxsYx+9/bipFZUBmrIi85LXoLFUxii3r4ucUw==","shasum":"7789817f4a7d5e412bf09e98ff99e2f1a15adcb8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CQCRA9TVsSAnZWagAAOYUP/iAHu5gViJqm6o2I7pc9\nLVwPQwKWchZAFfO0n62sNQTimGs0Yl12oQey3j/+/6BFosU2C/pzslrs+6Hw\nsObvVb9UC+Q/LxYTMg6ZB4VrSgRnTtU0UlVkkTnODLs/1uBaRCpYbooKbm4m\nrk5KsuxPIldSO5zd6tcvgSIPW3HNc2M1avF+VuPIofPN7tQ0U8WKUhB/mGcU\nEi+5iMR8ukob+6ao5HfouE3aDv6Rlh+nM8WKqc9/S28nfNUS11RHIn/uMCRk\nPNKkcMF31Vtg+BPOtNQSAAnukTZk3qQC3WxKW4eNZeia2wvjV/RP7p3R8Y69\newXeeuBMtiq/Oev7mchgtv/OMcOfnlhnU+IUtLg4j028jgqVGe3w7iLsCodP\n6Y3P9fzs3lWDzbq1KHPkk9duXZlLsJJBm5RFy8MKmOawS7TuvUYcORL5/3iC\nBZ7dF1SiTOyyKL/jJGRFvKlxjeU2a68dcv2WvZwjYWkojXh5tUZEuYSF7p9t\nFZG4edDN26mxao8046+ARmAapLFcqTq5F6d9EhYguagXJcMZ0ET5g4Orzwx1\nRmAf9Dz2rNkPED9KnW8+6+AsSVaoMX54aK44NCKyQ3JvVyjdXtgPdNG+THt9\n6zAagujkkBrIoMwNK8gMZAO7tnMqvt+KlXHrqiBLXEKp7dctd8t0F1ZbEqUq\ns8PT\r\n=PH8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2nJ2zZUWTZmudpnRJ63l4N4qir/Bu5fFa35/gSgoD4QIhAMiF04+JoNpxE2rixyLE4rME8LnImthe1AzOs0927Cp8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.0c1ad726.0_1589330064348_0.7760116742268832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-ripple":"0.16.0-canary.8b6a4700.0","@material/radio":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vILhwh4ZrbmZzFTA57qkpwWnyEgXeQ8vkeDUzKeGn4359ZLX9e+9gcCc3YfJS34CQM9isnBD+WG/V0D8DChvKg==","shasum":"e84eb5658dd55a0893d1cf2fec8a538c8dd47b02","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwoCRA9TVsSAnZWagAALxMQAJONuAjMm6N7UZjKjlOJ\nuwYpiMB+COuQsWJ/eYpO3yRIZcaL8MPvlJrvF5D0IU5CXMyLuOcilYGhhaqX\nrDtIOaDWjq3qFP93jcyATqCi9rFqXp3SCPitJg374NVniL6R869r3JAHisax\naYpSSvL/PAQv4aTtns+/3zLyULIpq7PjAFzKeBk/H3gbl0kghG4dE9R9ueY/\nli9ZGuigyQVAMsE5+iLcJBFRxS83+A0oC3IoWD0LrpUgenH12vlisK74wj2S\nfB5KJ+rTUfaw/fmpixUzNnq+wrN/yMi75op9o5rgFOE2LBfx+AgALsR70irf\ncIamKodEeO5TTKMPRIauB8JaEP+sjPA1tTyfmDIeHzLzpJ8qrcHuWzux9zoX\nvKGOwlTw3pebe1HGnPiC/IFXvU3KiAB+hf/hDOcLleWLmO9eHz2B2ihD8j0+\n7nn1EzyLL03hN1qjEwyuNt6uC3zsOZ8611/suRDz6ETCaaABvKRRKaU8pPKa\noIs7//JN/sg7zeSAqZD/DtJFLX6ZcRFMf7Pv94zfxvG+WwTUTxQGcs1wIvEd\n5u+wPN6wzzZPKoQVF169LoVPs5skjmRG+cR5yEZsccgSPGHJ4HuSlaZlcXYi\nPxMYCBAjJpzxXJ18Da+Gv76B6DauU5tNDVQPijgEQIGd8uBClKnwCVVkOhv6\nk4xW\r\n=SE0B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOdd2Tr8kD/BsX3/gLzVSCXo+a/bos+YrEFJs/9RQEFwIgMWonjfUQVGt0jNE++fhml8A5nxczqM7Wo9XSSQhW63A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.8b6a4700.0_1589390376052_0.2388017867364025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-ripple":"0.16.0-canary.3270effb.0","@material/radio":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Dp8Il5Z1Lxeq+tr12l/jMIGR7EewV2vmg7JkTTnqAIam5CYYIehwAqi4G55ORhfun3NwZsAegAgqR61CByb2Yg==","shasum":"2418382a321b10029096e45ef051c1e71b6e4c4f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWfCRA9TVsSAnZWagAABAwP/1NqXDwxQyIys4HZjV8d\nwMvpkwND5FAGGGh09sOI3eHfFMIDLkYHVseBuUXig19ZPgy/aYUtLVNPQGPc\nG3NVesWVoJXHlhvcptr77dY8BNECCgHHKFI5vE1VXY+wspJAphllTUYqb80X\n9BLLwyjTMkhZa3UIhrZU8M6gxR+M7xEarRSeI/iAsDdwphfO3h3XeTxhvtHt\nroOLuXlA4j3D3MYhY69BKHlPOHEiKzwcpR7oQHcD+MTK4YtoIWWOmWyPyNMW\nWyYCJd6081+uqTUJzeFkHZROny5KImkJqZ2yvgRWCt9s7pxY6Xo1/lui4xtz\nYxCfo3/2eXsYC+fP6J8p4/A3tdoj+jz8zazmrrzDM9iXgqFNIO6xNMO+SLhs\n/WAEEVCXIUK81XeWuWKCuawbVaGcqTFwyybBDizzL6DvI+qW6BbFYyoJedvC\n9wyXt91N+WbTQE98JtUHym87DlRi1A/ByerYRpU9aF5v5qHumWod0X3Msj+L\noPG4t6M/To2Bf6nvz+1WemOWjqQ66Z643avF0wtoRJwCHQ5SzlnYnBwTSEaN\npnBiZ2WeINP6026OvVqguD742l7Ucda6iO7DrKW9ved8ottf5Ba19NPJexTM\nzgtBedYYgChIF56Tx6kHGyj01sgJnbuimy83PCe5n9LUZIJrH+OofReDnPZy\n/keT\r\n=aCTM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSdLhJVkkLiXm5gRPzYIlZ08jpcYrtd5YHefxdvwY1OAiBsRwCWr+xui+jlGxofd8d+LBlLROj4Tg9pjUr3YQ3Eyw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.3270effb.0_1589405087069_0.46455514846564006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-ripple":"0.16.0-canary.832e64f7.0","@material/radio":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y+Tk90+UBTOTIOKDPH1TXHoxT16qqM9UXk/BebyS+wxEJ5b0bZ0fHRmrOOyUj+iUacXm6KP5MT+6//I0fwwS/Q==","shasum":"b5434e5d4b0fd1cb477e336c9f8c046415dd44ba","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZECRA9TVsSAnZWagAAUl4P/1wFiVTucGKEyqFnsIuB\nSXy4xyK4GA/EN06HNpUWzeYwihr4bHBBIOAYBCO41ur8qeAvcC7xOF3xMl/K\nQeF24FWDDqXiqUvIHPbb3XMbHIn3GVCmR+6uy3ucGLtzYYPTbFCDRzCX51Sc\negD0gb4l224umuSgLgiznrUaTZqZVeE6u3TpfzzzOviBnez4M8iMo+IfsJ7U\n4y0nKj4Ra4NbM1dwT0tFI7k4VimjeC1GWZgSEnMvi9KxQFrUOZrRR5mV5bpy\noHYD7mTPqJ+camHWCe4OJYL7cVIWnc+07c4/u6/yvfrT7QYqNUmMKMasM8iw\nCrdt99/eV4BlMd4KrcwPHfXL23nYfUuM5WKAlH6Q58b9ClUNfjOblbR9TYGS\nZq1t8TuRkuzbitxLOCXndnb3BxKuUphynBIJYLsnenH6lftxSM5JCBzeH8mL\necR2H9h6A8dbzHvMmUJgKIC026M4zvjezXi2354pK6dS58FbWwPf8pu3BC9Q\nKg2puC3072TNgJkyksbwRCcpleAW5czhHH3zEWfMuWbO90dDGRB73Y2oa7xp\n2J8GYE7KmPh7cciIEZVS+dxysqlCwKE22RWI0EGEEDpl2xHMdyJO5Fwdr2+h\n0txcHfl7WeQejsCtfNOLU8nnvrkMiR9snllNlQ3UMvc7S5kRlCFL1UqiSKqb\nPrzo\r\n=dmzF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDh5UyKM8RxNK5GXfQMPkzUxvmvCoGhlpW9eMWTYH3uXAiAwPT2Efr/Bhj3UFj8yBh4fV/R8qwK/d/tC/RHvUzFoJA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.832e64f7.0_1589417540070_0.9034022514006042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-ripple":"0.16.0-canary.472fc4fc.0","@material/radio":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l6GwUCqzcYqYOKE5SpoaoTkt/VWpzuVBw+gN6qKprMuiYpWS7FulguXNDy4WrhwuAzd9OKIWvbtPAw1WMI+SVg==","shasum":"1ebf0a907534da91bbe43c9b6bbafd1877f9ec51","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLy9CRA9TVsSAnZWagAAGfwP/jOZUu3XGYok5g02STdN\nw/JURKpeoUiCmUJubPJ19TuSu8vQ9o1PhxGbPhUNM5HGFKc+h0bpf/MpCNUM\nY4JPaDSJUV1ejeZhvpypo/42xZM/OAkVTTAIdFgMrck0b4FMKxRRxYUYWgi3\nCWyKh/ZGshc2q7cv4CyqnwHWodmDaFdbtUWe9QhbcW+/hoH0r8/GGr0AezE0\nGHuxyHagHK3wKWrLiryfhksDTdF74SCwj2zHwwyozGJUiJ9efO9M5tgz1ly2\nMTAGjMduRoo/lNFuyiRJEiciI+eGz09+yfyk24NHOFaasDlPknyjShqxXeEL\nVvnYX5LfItU7IgVHEXEqFKt9KJQPzOda0dHlSVw24b8Fz83QAMzXN+YBzdcf\n+98Ddkiez0SMClp1sH1R5Cy7SAEbdHngRkpOjXFhZijVAYBXKE4YK46z4N3p\nwQCDAWYxmDflMBjynkV/MVXp5XINrIz8XQW5pEFvHsRGPKUwbgUJP1SUydZp\nDGPeMxbOkU7rZiPxfiV5v47RBqR+U4R2ki7LNft05u2LOcBz0/A1Bd5ii0DC\nOGHiysbTNWGGkPClLLjPnD5zPNXNzajpo8JSyfUDW0f8qkmsOM0mRPRNFabu\nFm53JGBIXpcX3z0qWgugxAfjiUXt4qprhdiSnhRnxpS9MA5bTX8Vvz7qleXU\n/o0w\r\n=gzXs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK2qhMnCvsE8om1iYAD3MCBaMuUS+CNLZfIildAqeMbQIhAPpG509vagmZca3698KNRA1GKq0s50R7QodjnrHsO6I8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.472fc4fc.0_1589427388800_0.974533313469444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-ripple":"0.16.0-canary.4dcd7dd5.0","@material/radio":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wX/+q7WdCo8J4TIGuk1yZIfsPLxnUk4Jwu2pygZQnR76GSgwvzDvQ187v1tPZG40Jh0dAoZOm+dsSnWjO33SeA==","shasum":"6704534cea474467100f79ec3cc70e806ec187dd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDqCRA9TVsSAnZWagAA9uQP/3pi0lw6/GtQPaRgtX1k\nkg2qeZ7mxMpZV3cAOC78Re1XklwjTsTnppupeq+VMk2tT/yjheCKL+j3Ybvj\nkQu+/s4YU6OPJM+gmKP8A1m5Ef/7fCKq4cy1oEWatVPQapwXf/JFk/VGzuiY\nNZw9KTZxv9QEAckh3nEtpmD6otPAxK5vr4SGxeti8zCqvk9yBzrXscpZrj49\nX29D17hgfYhJsvNO/HopYCDhje/MGQyzTRmXiTQUjaTz633R/nb1afoo6wS7\nbdtrfz5Mry/N2k5lDpfdZvKPLSeP3iyJhg7iHPerxouRvtMcf0f7Ravu4kvD\nY46a8G0d2FiG8wFKsGSytWPdhZDjeOJ219npTOzqYRkrlod0jmtpWI8Jtawt\nZT9ZWTgnftgK324kXtAkwfy0aXiAdnG/gQIG/ujYHlFPzLZn3LqWFb6R4vU2\nozUcUQo4MdChPu6bnbLdyvMVAfE4I3HZsaMnjOeDiRw/3LjKrv7MYLWU5O6H\nuhgpflkI6Bh2kL1uKgti8ybh6UPPqyzTlr3rFg/vHmmWttga6EteNpXOx04G\nqqweBdJSfVIMj2/aGGG22mzGUjBW/PiC++w1hEGmS4Ma+hHX8tbaDGXwghpw\nasukDqvVMVRqw1qFcv2EVHMiAVuCq6e9VZT2VwCqdit3qYkSCF56FydvBJtB\nvxKw\r\n=jrFp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFP2FzhDiwrMoPNHxzOdWgMcm9DSJoDRBCLcvnoLHeQBAiAFbGDHZf6/yvvIp/z9BwvPwnxiAndYtOjgqZhF8q0dFQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.4dcd7dd5.0_1589473513925_0.6916302059584747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-ripple":"0.16.0-canary.bcd3400d.0","@material/radio":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KwYRlTAYRDpkMKiWEei4PyN2yA2q90vOFQWlfKuc7Z/RA0KsnwBct/RyHz+B31OdaAYDY0ukvIcyKkOZL98ezg==","shasum":"d5bece2875f593e27ff83ea70352dc2d1e5c1411","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyXCRA9TVsSAnZWagAAUSkP/RukVfoemNmGkt2JJPHg\ni90zVswDRnpIsXmvUwUhZKou6TUf3skoyi1E4gn91cVzatAJt5VcgJWw2+TY\n0pZVrRcl1MRmrTvrj4OKFVBHTtYlOdiRuL0/K8jgADo79DNLWH4ABzWyUYAZ\ntIVqLCAUkIvmoa5WG1E0Db++eARmHtuU5hNAyoGcW3YPicWxTdcUZdK6ljQR\nkoapRgqyvykPpO/A+seku6qSidesTY9QCWjqHBh7M3kII3G4/FQQu3/Uaron\nvKSqhh0VYaOmTT3p2CZR3IHi07n7nG9nhklpXfVYoibu66JlkReYXBNL8CSD\nhv4hazWWt5Pit/ITN+z82IrdLKYaZifwvmKKEsqi/0oyBIDZfVYZngVp7axQ\ntu1wpPsIONAq2SqJd6u0M5uHSguKn4AfBJUNqQ/v4HkA9kc990p26qxQjqeo\nxAqTIEAzbyFwgEEbQ4SkXeCgSu+wivIl3WhFszqnxgCMzCrmks6S2iRf3Z2A\n4xP1+sUrgHzgE8lZiGqITabSxeRJAX6TYcfiqQOQ3OmAcuLHstFsobpSOGSq\nul4EVK10mFGWMSLmsIiRPrUf53tNYFD1Im9wgVWJSnD7/aF2BWWUDKPKtFaR\nG6IZTTQkQN/cMXpO/UNv8e422ynfMUWkAM6mF1dk8KrhyyEjdAMd5TQ91Vwx\nnbd1\r\n=sngl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpQK9Tsz3susUzaeNNas0IuqmFpLKtB0eJWnvUPdW5aAiEA8PQIJ9QZ23o/PVLX2tWrw1DdNvu0mSDRXpwkOE5CMF4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.bcd3400d.0_1589582998901_0.002217028479524208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-ripple":"0.16.0-canary.91f63179.0","@material/radio":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OmmdcLomu7qD2mnOrSQhhWG5cAb4KrUskFy9PM76mKIWKOfl1foADi63iYVhe9+ZTWoYVgkeX7zdI9hRSw3o9g==","shasum":"328cfcee0e836bc71dd9ef2dec1a2f5627be236b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUgCRA9TVsSAnZWagAAUkMP+gK2mX8H7HDYzAigGPME\nj64b1145G59jvZrsPMcma78+vudXSw/TMprG5beu+cxWr4WpeUPfyzULJuD3\nqTDxmtKe6SYmFw9t4yAPcKAWfGcPBAK0IYO/AI0bVBMMJqB4ZCgZEpt3cMi+\n0UyjJY+M+44ALHPOVxoFQoZBr81W8Clj1mIVk/36Td9fuH5FAHgjk5Q895wU\n1TzoGz6OrwswoApnLzaHihh5pAJ1r3gpA5NBJ/8SNWo5PsFNmtaYSuog2ffD\nm6o5K/1Jj8tDN/yIHizi6IfXyQXYO9q6whgHkJEvwUH+c9IDfIH/gMgFBKg7\n0XiodxhRu2lUDQmY3k/FqoUbYeZh6VHFxLWya5URKini97y1zL0qwMJYp6Pn\n9S7f1O7asYtaw4d/hEoboYL0qy6JBIUef6TpKeF2rKNLXge0LOMIpaMTdEWB\nKVzLyWWmUQuJt3U0FNgW/Qhe2KIQJCnr7ups/2ZJaNob2+XIiypq73VeppdX\nW7MKmrITD/bW9hsDxUJYr5/B1uwE0Ic1GLn7Tw4XwujBjwNpytWkeNwnhX1B\n1mP/br5B7+3Ay0e7ByWzbwWxFq3x6JtHU0WLSst2XGaBTJzftJfKh7V3TCVl\ny85VIrWvikiYWGTndypvgPK/4OlbvFD4Lm8DG79UskI36uAPrWes2SxOCW0b\n+oFd\r\n=h498\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICFw6vcQ65UYqu5f/LaDITojDftIcpPidQwaiStSMfcAAiB81FmZsq4lBkQs8fMlwq+eNHTmcRr1EZzUZbaFkHVrkw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.91f63179.0_1589589279973_0.8471316414997456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-ripple":"0.16.0-canary.b8aafb56.0","@material/radio":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ByAJandYLddfbiOfo+tvmkDjnlvAN4P5liaJ4UTfba3nbgvlHpIDNJXQQDk7RpyPr9TsGG2c44jK/WHV3n5+Rw==","shasum":"31cf4ecac909b95bb1fa377082bc42a80c131236","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSVCRA9TVsSAnZWagAA2bkP/33RI0EwpntL0CEpbFBk\npmNrUOl1X6ahi+sle6oRSd8lExn/RyAxXz0V0eV3ADst/o6Babr37zQxFPvT\niKYJueOEWCw1kf9tyRws16b8Zx/Gufg78Us7ctUpjeq6Uj/3WaoPOMjCU5YG\n7vbgIF7TGhZ+yYCstNE+4XjV34iJLlNMi99n6vAy8Hxkc07BNYi7v8VvocVq\nZrOYKMlsSYm3xxyP1/Om/fc4n7jwEBjwhgPzsyv9ZFrIyB+VvnTripgMpb7W\n/M6g5oYRyuK5g5Lbum/QKzAvbFNz7vEq+cS5CTZAwIrLXsSkXcq7xWC6/w/5\naDU5tMs0+wpJ46PI/QVGYtTBTqsg4WTy00DCuv4AILrIxA7fSXt5IkZsQzLx\n4a4xxllPQfhIJVqOFsaQazYz368loVIitcjXZmJ977FHZ41q2RokTz06GqCN\nZiCtQ6Y6Ws5uFWc2S3q3jnZksLib9kOwqeagphQ3v5+5BV32jd513VLlFtEr\nVy7oMLcAG6vMfN0AKz8WQGlLOlnYWB7YhUUHFPGRK0rOuqukO51sQwAfOFl3\nUMqlgbDmSAsOFt0Ctk8KvWvnmvP6rG48Q15KDgAATDGTs4NMZf6yVwihWzb+\nyO0Ce59XHfM7mAvDJENKxgO39X6H+MT4Pj9atoLlx3BsoZmnPA9fhmj///eK\nrEmf\r\n=h2so\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnzYNGwbGfK/fxGsM1LfqLa+p4WZic+A0Qg7voOfSw2AIhANzRJxvHgk6wNWUA2D7zcXej8wpu8/XydCrG99xGBjG8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.b8aafb56.0_1589826709082_0.3511495016136035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-ripple":"0.16.0-canary.a564b194.0","@material/radio":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xwPJZgE5c4OdPc02R0+kaOJWfCdziEs/kg/sywXJ+vIs/mrr6tJ46gw96uiJQwOoc8D151mnE0gTU+SrEsEYZg==","shasum":"4d6973e6bc11e1158a5c493ed24015aadde0470a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRMCRA9TVsSAnZWagAAZXcP/3qOaOj5r6eyxSyEMeL4\nLHstu2fcmQyJW6SEnVvCRp78PWT8gqJcEF9T7TprbvQcUzUO5bxabqTNLI2K\nWdqcxD3FbcZkHGe4NSO4RKrTOx7OYUtfsuj1A7X1Nr37WTznJnVlPV4qH7m3\nrk9hocYTL4K7Cb3MKhcfLzsokyManLuFVbeU1NLuD739tfloSurVScO2w4bS\ngCaYCDvF1tvv3VR0sdlijtw5LdIJ2Pcxe3a0QDwZkOX0GuDmCa46cKZRtHEG\nMTgKR58x+JilIkPE24bz3/B7d9cBXiSQhp1YzEhJXo6E30qz3cYE8c8+wfxb\nqqxKpjYHDaRPj+Dq+GXcfjoJ0Fs5GB+v5dis1nnUq+/HOckO0+EcwVoM1o37\nNMJEj4i9gIkPyD1X3Nv4RJ+ZWr8eChLPBIk3XZGLurAx9swJ34zg2IJpWYEb\np/PY3tDWNBy9CTjfnlHGCb9RahVv3NrYR0dh1BcrPU7zTUJq2MgI/5bPVyuv\nvcL0tK40m15r/Uwbx9GuzVidTGgye6eZk4n2I59Yn84hJ0579/pMN+80bQ/2\nwJk4y+VCwYHpwzjHmGKXOrth5kBNCXlZ9JAbEg9IDZkOhczslYYD4mN3NSF5\npkadETEvHCLD4+UweYg4iVeXBq6O7XUMgpLRLYVf7uHhZkH281VrVf4KGbm1\ny5kU\r\n=PXVA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdazWJPGIJGkexp/eadWcHhH5DAO8qnqHkVwhLS3C1xAiADLbDzF41A2WRj7OYbAP0ytLjPNyhwAFHwahpwDQXMqg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.a564b194.0_1589843020580_0.8679440299915313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-ripple":"0.16.0-canary.ef56465b.0","@material/radio":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MZYV182l0li/vxF5RZVeODt84+daIKPPcAnkzk2i3dnmW/myuE7ij09WcJ+1JTxm8QTo3IXPo91dNMwQKTAKsw==","shasum":"69a4272d6ac45c0b491186707d2eba0f0588400b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1buCRA9TVsSAnZWagAAhaoP/RKoHjXed6+hzb2xfr+w\nPwPgP70DT1Yhn63emQhwqx1Cnu3bu3CIDtSqF1IZ0l/XgAQtpfExQjBvlyDD\nar0KH6NJEnmFFWIVzJUnK3SCx7Yr/uXMALZkq957doWNYNR5WHf9aFnZtWIG\nM2ibwRG9yM0M2cyjwIFOz5ticl5/hgHR71WW9iUb1f+DfUVQqh/16z++K7JW\n99QrPjQNF4rsxCeLCFMTez0KpOyMSrQRGczbAeyupnwsB/XMCGifkiY+RSqd\nMudTtpJVTrsd58ByBY4lvjEWUxrNB+ZOnLBsr8xLTUkh5VXJlfz+UyOJYaJ3\nKAwfGnvB6wNlR5CcAzOpPP3myoRVj+pzBr/15nwT63A3EusN72J8txYK45rd\n9fMvkQPIqVyfrOLe7TSjS+M67KTMsP2+5FEdJEB3VOaTv8HpU9kUfNdfXhVf\njDSylE5pP9GePD9oxAvV2Az5ndIppG6P1K5eOw6jMd69QOSGVtk6psRuTqKi\n8qa/HbMwYGBgiya4LSUWi8y65Sl578YqWk5yQTVqPlQcOpghzJJALWRpf27u\nKOxl81Bju0EeF9gWFFf4P8DyxzKpw1q2q9OswzMAxbmq6vwse70MetTcU67U\nr/Fa3LLH7/Nt2oEyL9lsPiyPTnuiBzIix+KD8WhrdnVSgZtcZkSc1BJjFWzq\nxYSs\r\n=Jogx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTFEAnjxFpCZuK+dsTK/VgdUosmoLrtH1WsOvNj9tv4AiAv9eERiFM6z2JKogEqyaYSVPPE9svqNh1cZP/29yDYVg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.ef56465b.0_1589860077678_0.9021166621025134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-ripple":"0.16.0-canary.c22dcd71.0","@material/radio":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E5hku9lgZi4rG1lh0kGgNXk3rAVitBq0wbwZlI/yatzyprWVK8lRVN3I7Sa+D5AtCKfG/KeqMcfb1K7ByEcwVA==","shasum":"8729b21123ea3b7065da2c9b3eda83b2ad0c580c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZJCRA9TVsSAnZWagAAguEP/iTjRorVsrRbf4h1UIZQ\nNBry9abDZ3t28PCKgDqP8c8uIxi8wtLdE7mu23d/2BwTP15XssM4TJA6I3zE\nYlTUsVD2bJN/EfrVUYGpti4g90xHT//tDw4+DSFQ7G4rZRHRARxwObrFh28n\nhrHwy9vTmzJChpu+JPP9dmz8/HsPTVIlnnywNK+ABOcl6L7dntvtm5BuPXco\nusNCzXm6Et5XOMqfjDDzQ+WBx1GXtMbcp7nZE+r37O+WMCDrzY0nuT5SgurO\nePbxinvIGgiDWxbV0O8VcYdXRA+l9DRauwXO37CCYcwTwJAaUx7CNgpoXS8c\nXoDl1WmCu2giOZzDN/jC7d6E/n2lU8xZBCmkMmdAwwMpvuhzjhqzv+yzXLn+\n00OLMe7Msk9WVq9OzgQZLmnITm8r3hFqpqSl1fIo/rBNG1ktZiNDJQj/X/Pb\n0tjtrQJUNG84tER53BGCNWL4qbbmNn9Msqswdhf7igWLPzEvzLc1Uqn+nuOC\npqYSnkqJ3L1NuLfE13ikJXOfFZrfXCY96dBDomD/IMMEiwTp8imQiH8gyap9\nvExL9/j0+ZK44l5WxphyDKTjNbMoEWVuPkmxuPwGFqnT5LLYzF+FwxRelDIw\nVsDc8Ar8dAHF3cq1WmxuyO4RbAt1YN2IPJ2nbab1907BPiq9Ztl3ASruWIq6\nhLYb\r\n=g7Gf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2DqQ9SIrEp1/80pNrJr07fLZMmcJ+0t8SJ0dUjeeBWAiEAuKjpmOf/CTSRMSb1A+JrZTqkydcwjhmZBolsnsmOTAc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.c22dcd71.0_1589909065225_0.009923660242933785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-ripple":"0.16.0-canary.6eb62388.0","@material/radio":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OkATmCwwuwVztkwL8vbGqQbaZfpIad9bYqlbmpuDvMCR/p5Ad12zSWMmMjbF1poYhDKVItbYrNxb+1P1/PYQlg==","shasum":"b66efbf8e506d03e0627f6f8a3c0c2b24a6f21d2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPICRA9TVsSAnZWagAAx3QP/2Lzp3Wo1elo6lrdldk3\nSJHew1nYf0xrheFoaJLmDwriRsfrYKGPvbg42S8U+mU9aACrc63RpA+bBu+3\ndgRBg6nUnDXBtYqgcNPk8LhhfN92lWEzZjddkqPshGXBHyUI59QXMzTJaeRX\nvMNXgTKfROIzFrfk6b93o6/3B4PFmq0OZ44LqIhwIv9R3BIENvaXV4aOATo5\nXoET4CxaTADgj0NN3ERdVvwjuWPWVYtnHXsveTindnYPrKoMUlPzNYaQA6V5\nyOXMnQSWRsmhJp3iy9HdSdnEUQMjIVzgMT7eXJLV6m9XLgyOylKvvLQGjNlY\nbIKJoFCrmvzMoX6WfNH/kDXNW9g+1KXjbuhGcLYzkn5OaAJnHPOez0kgdkgo\ny+KnNNOzu0sG790vGc7iiZ29fxcYdoCpSeZII9CXYglQPDkE0i74NTaNCWBe\nXLVPQxtPCS7H4HHvyNz+tnKjztLaIofj9AXi31Yx+VeaBpS+iLqJ56GE2xOM\nM2zHhWng1/K/NQ93XGp6UxCyg/MPRum8BXViNPLG+R8oIRN7XvlQDnYpTcGE\n3C/rahkIClnUyR7UkEwof4mEwq3LuxaXSNVyB0lnq5udFb6Be5ay0rxEU11Q\nIBUqOsRoj5VQSvif17spke89NH5fg7Zo4QR0R+C21xcssF7nQySB9uLQQyK3\neNiJ\r\n=mZpB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCC3tJA+jCWQ9n0yxb/Ov8ZsMX5Ng27SDSrWh3+FXORCAIgVp9C4xI2OWUI5or6Vza4r33cCJOHVPcZzjUCoykJ34Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.6eb62388.0_1589920711984_0.8236784974363407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-ripple":"0.16.0-canary.9bc3230c.0","@material/radio":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xjFRIaQxZmIcUVgrk28IeRw8pHwx0shCKtfe9s5vsr63AFSCBMvvoqf3gsUwbVX4rerMJtqm9gLdhennGNQD7Q==","shasum":"dc587b8b3386e2c3887365fe73b22b6a4dc9430c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFHrCRA9TVsSAnZWagAAt9EQAIR0g0aF8GNCg7nVwcEs\nMmMGdhqE9zLmfRGqtOIKCM/Vb46UTfK+HNOYbVvqRycy5oMWACiESzDoqOG2\nwzFZ9rgRHD0hnZ7FUqYyFUUa2XHOD2/T7Nii6g9Y9Q39L5c0A4UNxvF7RWLb\ntBSWhc8zLPUevGYB8rz5F7ttW/8Hk7Vq1PxzPIvgldHxwMFUl31+TxuQZGa5\nkXYhWFh+jxhYyVVUINFkZJ+KQlKq2MU9bTxVwvXaNNyC2546AzcNjiP/n1mI\nxM/3k778dqaq2ng1fEu/Vlc5ymYg+fGwsQvNhYJCyD4ICine8w6XMGM+tP6n\niQlxyolA3e6XEblQcRhTv23r/JeG/OLO3oLKvH8cBulJjmSR1eLyPSsTw4un\n9M+bn49ykaI3rbrESuR+6znX16vv5/cQDFuDan8G0aWkw1gYd2RmvJ6P2uya\nw4cAtzJG7cWAEvvobobOWxVEFyRWYIFd2JSTt6Cz/D/QOSiIQc9y+IOAMXIv\nQpX4Q6vRjW+W1Zb8bUqx8JvkHMBhfQAeb6eDzHhNSWtg6RKa+vHcxJ7bi2m8\nEjFXd+OZpUcsO6QwkXSe9LU1Af16u0Yb7B+/uhfqk94XRN8mrYKEa9YxM0xD\nDKTIH+BpAjScW1O9pCPwNEC3Ijm1cUPxLvJ0Os/XxPg5vDaWdG6icNUJxC3S\n9nUa\r\n=iqPC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPxuI51RTWABJ6fdvxGvW6Z2nrJUDC1h4l2LG0Oa8aSgIhALGj4pvIVIbA+4T6mc0MxqYqch94dr62iTJfAQitpYP8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.9bc3230c.0_1589924331512_0.04121356865196124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-ripple":"0.16.0-canary.421a6856.0","@material/radio":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LMol0EdnMebWw4+aY2R3Zuhc9w0pL6zhoqGAXkb4SMFFfusrfWI4J32yyu9aoIVKmK14GJv0cNvr6uOYi1dOLA==","shasum":"9a4ce9f69e159e05c5d61d272717f29f377cca3e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8HCRA9TVsSAnZWagAAW2AP/1SQhroV7mT5Uz4ou+mP\nW5yrzi3C4Yk8508j/KKCyLYFZhWypzNBKSsWu78igaeoqXkL5jPlUxmpFNNo\nAdSGinuRRKE1SlBeju/sBx+Lqe6Acez2/HAre/SwT9JpbSRKZmVBtWZmRhAn\nmZftUrKS2i5gHcyp+jWGznFpTWvJdMwdOardSZlPdJXF68XNBdQDIv3gSB/f\nDaWPAPeVm8D4HmJGH3MU8+x8qyOxPf0mli+OFpIi3jKLopSyHKYLXCAMryl2\nbGvC0Nn/rzuN5AB6M+0S1UW7oQILq3QLaQaEwadZoRCBEinwuQ/UOxoq2zPl\n6VFQ3nXW93azjf9Me4NtOH87eY0/nSFpBDpw7OOYJIP56UJqw7tCh/hZAfw1\n+Z8Rd/DpbIhjH4BBSLGoyJam/wgI8Prsj12WjBi8zP1K80dYgzrrMEyX0RlH\n2iuArggk72rT5d2T6QFWTD83FgF7R/BDRSPJn8SY0Xl0W86/sXKXRvmZ6mBi\nkFPG1GUL3824VZTqsMy+xrpH/K1Gqi9PxzXsJQoDP6A/O7Fh2NW/EZVn1+n7\nKMC0NOOBNqPYWyHz2Qmjh4bufdKUku2QLSdqXWv+zvikDMbbo4ar+het1Soy\nXSwlyu/6wk4NmKGyHFKCvMKedFp5wv2jgh4Ko9guQ7uOZ4QBd4eLsJsGyRtv\n+Ohi\r\n=/ih6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvQhfRLGBmhKL84PjTeVRkenS/ILy0WHxtyuuLMLQ3SAiEApkrucxblhhuXrbXAlp4pvhLWGCjArZy4plCSZrNk62E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.421a6856.0_1589952263496_0.18766765561125198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-ripple":"0.16.0-canary.761aa6f2.0","@material/radio":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mJX9SAXWlngkIVU42CDdu429I9owwxmup3xsXP32i4owHt/7qliGTWWd0CdBm2Wx70t12PZ3MyG8F13wPh3DxA==","shasum":"184d67a251268d327f8e9aed7c812a29f59d82e2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGVCRA9TVsSAnZWagAA0JAP/RvItfSsNnDtUERIu0if\nD2zNZA71GS43BThYePaLo3ZrXIgVxFCoXI51M5xt8ERPBqCOwahlkWdU6EEf\nC9sRw4iMPoPZWSONLytqz/siSqiAqt7YhjbLpg5jkhQcXSoDOENKu2h9aHqt\nyweQbl+KssWW1TMXs5nfbQP8j4TcP6lNjQ8RgR0Zi9tSreXHWINNLwckuY95\n00P9eME7pqkTS1gTnsH2Tk/Yb3xyXn7TXSZA+Id40ubqB/DNgiXtVd4F3Syp\njg4weMxi3p6r8Twki6geLRU649eEbLsQ28OdIEMA36Q2Ssvshb/cGA4lAQZT\nRbdTqw4SU05MHJ/i5lvMpaEpiBr0Xz+gi2EOZ7YbPYOMokxAGLR47CZQp3ks\nkyvR+5HgpZXziFom5J7nejtnFK80uQiaPr1mHKFJj6no4GADArezU96T0MlX\nwaFnhmMLzdKuppbUO3RB7bP9O5k8UaHPOHbmCTtRs77L4/mzr/1rHMPn0fl6\nu4yG07/bTHdrlSx0fXVz03N7q9n46lgSsrfzHMsOlhGKNoTotFiFIFOPL4u+\nP+972wZvQARLg+UWvOP9fElY72MfhFKMtf08PHqThAWpVRcmq5W0mAHwMrF4\nxPxC3LHe4MLOZ1hguOB06c4mg/OrnbQGpyUNGbQsw+7ySvIMzTysRUjhdaZU\nkSQE\r\n=zQA3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhph+pidcZpsXUZKc5tv8GttBmJfQvgp+T4mx9uipY5AiEA24JZDvmmtHoidaUh9TwafVcBVti8Q4CAd7ZaS4zQJ54="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.761aa6f2.0_1590010260419_0.8358428767044834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-ripple":"0.16.0-canary.f8654c40.0","@material/radio":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z5C/Z+PUL9TbnYnGfnf6fA/KVuIUVe0AQRFuRaVPfzVit2OEbbeNM7+JWlA9yhpC4bSjcvCvuNAqkUlK2R4xkQ==","shasum":"0022a1de1511c67dbbb2217b58aa95ad298fd240","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPRCRA9TVsSAnZWagAA1/AP/Azm5QpIAbinlEwfObzF\n5MakXpslk4i+9j3vflo4/t594UAKH8ll7FAvf46tfLfbJ0Ha4XS8SfsLU/I2\nNvBSY/mXTgIOeXhyb1rtf/VqTDDJQMhSZQBQfyIzzfeDSLTwT8O3wV1jqFvA\nJAb+L+a9ws99CApC7CV7kDvaiCtyHOfUADF4TPRRTavgFYLS4jcrxMVsbvBY\njSih6RIzjdXuXehze911otfdyt0Nn/CrulVTuHx3op6UH3fSrWyo3zYjwWlp\nngNZhwiq4MNmGdPV+1S++dw+x7irBnIq4mlvgYH0oMIrOBtUIAd4Dop1+F1/\ncTERiuVwlcZpAiy6EhTcb4yLvduDqd2lkmwvfE0RKyCJE5qeM+3p6fjiFLVx\noS6M50GdRlOGf7VFvLior98zWs67KJqvtyT5EMJgo+5PEacpfSJpxglP5li9\nieRdWcRNTBDyPA++fVPoHwJajfeOmA0oHuLaLdnlXbO5vaIbtnQNVCwgI82Q\nHTt2O2h6sLhzR3de6345Ili7Jt/l9vacNYdhwsxM8nlakNFNMMD0+KnsCEb5\naOsoCrCd0N9aOSk2qSrBLgf1VYKnB9m0MkFDWLNzR7HqGBUiPxgRL8njTc/4\n5ItX7370Z8aGxyjYPiHrxHElvuNFQMwY8jpGEuwPBFcH9/CqRfa3t/P/V2il\n6KK4\r\n=Uczw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5ccDmlsDSJT1TJdw2bHbtbxGPROP9V79YvpS8XKSaCAiB8gbnmWkYz3iUTmseh+yH4gOPGlNslxYRHsfJI3hsV9Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.f8654c40.0_1590010832804_0.9537145315266966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-ripple":"0.16.0-canary.05f3853e.0","@material/radio":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oxC9i3D8e17SPS5LqSPP/3YhZMjJGCHhlC2ZkFOmr2niuRQdMlFFZe0I4KyUxtcFUvq3OLxw7u0lrY8UOt+S5Q==","shasum":"6aa8aeaf3e9ba46ba6ae93fbcb25c33a811b5903","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":96472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtlCRA9TVsSAnZWagAA/wYP/jNdEYuXKhC2AeJ0cE6E\nN++bK2KjwH0MyaGac1a0YH3WcYPrlkH00Led3ivK2Ib3v0W8SlkGpyR3WsMS\nG792U5CwhlZvI0T1x7qp/K5fG7Bv6Xi+VvEshSTDSvg1fMpjtLCKnFgj6Q+S\nAiwT0cNrkQVhQkD1/e3HlDeLPdEwKGVPR9ccQnrGf/FGnQr6G0ynj03U9cZ6\ntKrINau88ljhbnoPYY+jVIWKcrFKC9wh2p7xe7owq7ZwB6+ysJEuQ+SBJGdC\nyQe5FIsL7F0sUdur7j1DPYDXqhfUczx5lZDSDdVoa/DijUd78C+r99ChR+Uj\nfGJWwmHTbvjkemQAUp7PkHi7grmRmK9lq6v4l9F7o2BvXHMkGAMT6gRLBysd\ncu8ys+c9uT5WR2MmqZHh98jYMcD7wIRXIpcfd6Y40zAUO7SZDmvwn8VSn7wI\ni6wu+VngdOh2jrocWt2/fL2AVQjlAldcJSPQ/UuaNebBNEsy+mcMo/Juft65\n0vV79UmZyUrzBVFOY2rVbunNmz5yezF1a711Wqr5qF5OsalAT2bKAETQtJrW\ndHSncGNRbf5gqR/Pp9rqziWmEMsl3/RpELpbddxkH8c6VXVCsoX1AopaWEv8\nQsI3BLuHyvFGqFnlX2FWl/zXKnwjuGc6OJ3iMObGrnta9Qdw+Wzq9yfOFr3A\nzAU5\r\n=9xIz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTbf+0+/wRyxem4F7BUzm/d7rBzv/uxHfsEyjehMOu7wIgHAHAUhbPcDvEX5WhYtKc9YZdvuqoW4lu654oOm8Ovig="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.05f3853e.0_1590082405090_0.27406417984918297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-ripple":"0.16.0-canary.5fe61f4e.0","@material/radio":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-usVje/Am6lvi5JtGw+Yclol7jYLmvsY0r1Y/A0m7Ela1UPmMm9p8zR0qyiZzEUFnXOijnAK7HZG+JII3nJ1f6g==","shasum":"3806dbe5b4b0828d76055aa90c0aaa967c8260ef","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.5fe61f4e.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnECRA9TVsSAnZWagAA9DMP/0uK/G2qJ1Hh5x9KRN39\nOgMC3MoyvlpZKJHi36zStKTh0adeBZ/ol2TY6M6UdKzfTuXo0VzsXJKk5Gx0\nYQVxYZOOSXmK1aoYiunKW/Af+1sPsTMM5U6TPBG37MgidFeukHbDSxls7xGe\nMaQS++uWEg4fCpYl+fTiWVvS1zmW3xsSGcW5sYua7oeW03RyyYqYnI/BAniz\nsP3r8/vVUeblK+XV+1QBzX/d4RKYJ/CyOwDgkguDjblwYgmbOP5/dcvLbeKO\nzqf9H44nLozluBxv+1QuGSfcrweH388AcVTFdDwz2T+Th+hJHxCYMlgFKBAt\n9lqCqoVwdyAsms3n3TjHOfTmlmjDWE99R9mfk1iRdUCKQhgwEF7MpwXSf/cM\nPun9nAyt/7OCRJ4FldrRI15ASRDpwzxo6cGYm4AuvvVjfP/X5i1ZvqXzpaVg\nHDDK5T8SxQePExZxEgbsLeuj7pu5OAQZ0y0oTXvRYk5z5ZbrbsYStSpdqZ79\nBfXp2tK9VLvNsI+ZBsFMc7POMT6AJ0v4EZRUdK70b/nf/0cdokGu8sDgzMC1\nu/oq1z1vW/ahhpkb4yc2OsuZEB5otdfHts91wtn6NcrSezLCFKAOD1trZdgq\n9Z676X8q7PY7Tq7xr3+xGBFcV81F0NlZ08Dn9DLUdM/8/00UpikKKD7hbe4V\ncjMP\r\n=5WTO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFkiWvwTBirAQDwtFJBRjDciDwJpM0A6w8kdV3/MKlmUAiAg314g9rOBiKOw2zJFSs0tW7JWfOqXdEV57LOk5L7TNg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.5fe61f4e.0_1590102468478_0.03273184743529245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-ripple":"0.16.0-canary.17d33745.0","@material/radio":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5DFiujLrK2gXpiO0RXybo4p8oPI9yzjypDeENp+Pnz3SD0Y9rpqXymeK0qe2rZYEsFxHuJOnayR5iY8BgJslNw==","shasum":"a9cceef84ee9ecaff298d0a8ab44f37d62e6e8a2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.17d33745.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBFCRA9TVsSAnZWagAAWKMP/0LJJzeL7/kc1iEkhhUE\nEK5wzOl4yuUwr/X5IEoLl1lCWmYDuWzNIy2P1EBiicairxHcEkKRFZsropsg\nqP+eYJNhrSLFz8kTwika9Eli8mA+pnkzGFVcS8QnJB/aNA4BvLqsMD+oNrGk\nuR5j1qBfBI+BNcda2E595pt0TPY7WqKRLGWsr/NIYe39Qmh793zVEtMlZJHa\nwV6a5VQOfzd3NA+Slj+k8aHMiNLgo3pAj07t9FJV8K66vBCkCvrGbDwgV7+W\ncLPKcT93r3mleqkLIWLW1lTDO/X0zae8ucwBJbpzjSBlb+9G3kWbJS26HNMH\nYpMw+1RCgn+jMq1YiF3kQ+epofxyPsoh5AH5m/yTMpBx5eo8dkIrEaQc5YR1\nxAZVusR4yyYZMTbnGc/tmzw3kxOxSQtYr+pT+bVGwNVYDp2A9PWAmlelsfqy\nvwiUKFomY4aQB+eA9soayI78aFTQ6P3ib2iTQ2W8rhlqypnzo7AnVT6a4J1q\nnQXmFVVrICYzsqPNTerewcxAG/rVQxNhi5uSc8QWZGXMz+TAs2xV0URLcpBJ\nMtwkQ9pdlJ//HzUTvADzGR6F5XHLpnGi9t1qN1mgLlPw/Q/gSACtmWCFwIvR\nw4QBuy5DAnLOHraW4yXFCmN4ftia944eqeGi2TzmGWytH1moufZnZ1tNej8L\ncN6Y\r\n=kN8r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRAlIdvJxiJ4m0/cC6/zlmJ5TWVNkVZQsUDhx8Puks2gIgM9NJBFghTwjweiB56l3U9/ilacxykjizO4we5pXfq1M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.17d33745.0_1590509637131_0.12802346294773725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-ripple":"0.16.0-canary.e8b52f5b.0","@material/radio":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kgZZnTUNPPmMZ7U5WeuhFOSwHNbmo5u7OZoykNg7tQTZ9/tMgTSJmkeWPSBa4qFlBhzh67EkdBpAz2FhfpkUew==","shasum":"bf9d33760535d9594fd3f063d0ed9508627612dd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.e8b52f5b.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMwCRA9TVsSAnZWagAANbsP/ArlSoLvC+QFqq+HGjC1\nZrH43PkzGpTl4G3Ln/G7Bq2upMEZTtQU4v/a9ux+xyd+VJHbhvJWGU8e6UOz\nLjgSC83sod4Y/4B3h9o0zlYgI/fKbor9R17kyTfpWenHJB/LdDdDy20xrM18\n5L2dr4opVL9jou5pxVP9v+qiECLdbP9634oOv4j6sUjXOlNZXZYE5Wxvu39p\nbXK8uWPoePvBMvP9BrU/NaQC+apkJjvgb71jsmG9D+bNZ8cZbgReSYwYRuCB\nq+T+gTzXpHljrt/18Xaky5KCIx0SrSpWkWFxPVxktUT69kaF+h0t5VGFKPLO\nwNjSPXRkpr9JvExPQ0TTDJ2NknIn2SF7T0NPvAZjgYEv9a15nPQJz8PGHqNx\nQxcFS54H1HFOEkFMHek1j1rnMuJUbHZlAs8IQ+D2qFQRzmEcBZ0XDXPy5lI+\ntHoVfEbgkh8TjLccLPDdtNH8JwDRdaSW345JPHoXN1pG3EAxHIhoLPl9wz9D\n6DGEUt0vCXVp3V+iSPOLdWx9bYQRMM9TLlhf5Fl3wgxtwNxSZtFgLM7tzxXB\nCedMf7HYoPKvsyuUo8Fg84a+ACLczVuoc2wg7wdur5z+hnQCo3WRvpjrZyns\nzx1NN6K60tNoQboL44E+tGG2/D8RGT5EUcKHrziEz8H71OG8bMKXmtMIcwmu\nPRyn\r\n=z/xy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWBj4iDcWLp+8ScmK2eS/pZyo5E6e5A058izC/j0kF1AiAG6JDIT0V50/bVcJ1JhQ/H+0SRvW2OOX2j9nyaAayyuQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.e8b52f5b.0_1590518575758_0.8065005639130014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-ripple":"0.16.0-canary.09afa0a9.0","@material/radio":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-t3woZEmAlGQc8/QlClQQaTET3Bd5VH6Bhs4+dyteo7ArZw9LqfLu8N9znNiewOa7yQcwk4vhtH9x4Om70XaYpQ==","shasum":"d1cfdc7cb7dd61e31e4246c82e224a81fb67afbb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.09afa0a9.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2wCRA9TVsSAnZWagAAeisQAIUTfTJj8ddMaIr1gr8V\nP9P79PW/2mN2OboKIhWkpNc5HxM0NRFouWBsR/WkFh59qaalp5Cb1W1ve1T5\nsVOkgHHIz/RHSSdRQxXhLNaSIrD5Cuy4ZwbdmROi1BjO0kLs31tUNEomvwnx\nb+DuCCHAv7qUdZzeAmmJyExc6kQ5wj8likeC+USV6+EEk22gE7whSDYWO9d3\nn9SgcxgoR8BWHapLnmlIHKULKiItZVdbfKip4V8esxqfa2pODvdwMgIjMp/1\nCOq5zz6sRAjjn0dx63MvtThYazp2LlDYsU1dtxcpN+1VwHrg8tJZeja7Vp6z\nXEGaZZnExMLlxljtU8KhFHoQ/OX0zAvwgUpUPzRipRTbCyhv5+WTAE8bKuXC\nMr4O+6+0XoIh/Q/383IYHHNfLb/IjxGafjKMnyfO60u64wtOWFP+PTU/qDxE\nJywEscR2431JHDjY3vZ+ixWo8FAUQ2UobRk+l4iqUu3GgYQOzV8Fu69q716b\nLPybFIYGAYdUY8HoPGSkqKGbUy4+7yJ4OdgmZ1CE8IoKIZ0f56/kp0O9LeHY\nhbXvBDsb+cTyyT54bWL8HW11w4sWo4x3N/xQjboXbwaJQVQr4EOv60VwlvnM\nET7LMoySRUDXYhIo4enwcqwmZO+88SwCKtJD448L3gkzdJUyYYszWNP9Rg5r\ni4NC\r\n=56NI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIkKbFEkk7bjd/WkmE7UH5QABPCIDBSQmXnklGOss2nAiBu6TsIOJUotbv++sxhTGylfj3f1T6C9bbgAnlsRf5IuQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.09afa0a9.0_1590529456521_0.9085619678871824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-ripple":"0.16.0-canary.58bc9166.0","@material/radio":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/AXWs0JXhcgpKEM2/epgleOs0h+BQretdJqeb414yLMZpRiNAWjfhhz5KnqC0M+tiKSmBN7h8K+ZkOVm2PLuaQ==","shasum":"b0844a2c08c77c32822948ed93ba09470e9a778b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.58bc9166.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSlCRA9TVsSAnZWagAAII8QAI7ZQR7U6UolWpHBMdEM\n62XWl1B3s6GZAisS/Hwr1wDu2djjbhkblcFOnbI9STUsf5uS9cnE4XmW4Fow\n36Cdwuj7gJklt85pTRQOby+I9yV3/z66sGW9WWefNv3J49JesSYP+lw9nLQn\ndd27w4lPVxYHVqfP1GmRahJ0BPdDi4pGic7GODwcbVDr7AHCmjifTtsbo7Uf\nrB1ObVOzFNg2XA7paIkmq2GgeOSnX9sK1rcO68A2OaJow15ZRdNy//YLYkgH\n+dVBoYYziShlSE5nqChTOZk1S3g6K5LYEFEqjo8dkeqsA1RSjRSkglfZmY+8\nQsRFaHYgcbtDN7Sd18tjeX0xdx/QPx8sXFCKiUI7DhQBP2JL36sNFoWZJzCo\ntW7AmuK9d0eIvV89r4CLiw3Mu/e17Zr4pWod2hAia4o977ZQVW4Wk2ZrzDWk\np1h8zRXiNZv9PuCSKVGZ41vrVNal0a+ujZ8Z7+pnfSTEj7CDwEkkJVVIn/84\nMD/I8+lw1NHt7r2B5JSrjLF0ib0JPg+l08Z2xqzl1vyCETVSJWfNdquCoolS\nReuE9jUxbBU0sb+9OqLFBLkKza9zuUgsqAH+AjL/OL78v0YFpms9hLocCZDu\n2lUj7WD5Gemmx1slabcpG9mk26mEY7ssQVrKehoUyonBE3Um1v6oiVU1HmmV\nuAo4\r\n=tko1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrfnuDsiD9qBQDTQsn3XB2g3H+NJJVO3ShzVl7oLxLuQIgLdD4frIiA2l186sVtSNROwP/FRZiA1FHG9ScwZMsWGc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.58bc9166.0_1590539428972_0.0049215159960169785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-ripple":"0.16.0-canary.43bde144.0","@material/radio":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2KZikDXhmHlgEL+ITIkZbJXE0MHflRUmFbbmRDvfnT16FAZgE8VDLbBkp4feRmYyKzXR6MprjuJZUCGMwYopMg==","shasum":"2cb3aeb55e90a009bcc9539089e3bc953a7e8f81","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.43bde144.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGCCRA9TVsSAnZWagAA41gQAJ5I1Gpw+3L4xgdrpQld\neSeCT7iBVRsOi00+vUOoIRpekgZr+WD0OyS8Ej/C/tjyPsS1VgA6WEOe81xw\neBCi5iRprFN6Z0Ricz/OYVLMK2h1zFpCDQ76p/tI3bHd0WX3aUxNmf55UJjN\nIvrcZHNiu9tCQ5XBPgsDwzvjZRo9SVpWNvE8TJB+4wsibo7pbmLVPEU3VmGQ\n45v/e9wEySboP9DADzQundTAT/k9H0vJDdLBlj8PaDSY21+Y8XHMMRQ8+iTp\n/g0EjZfKhgQSjOclZ2RSeRrC2TConCF3HXc8s45/NChf1wgpHPa1jvqjAKY2\nY7gQWo8jq2MJIuEsfeWIohjxrQOOcJuPA2izLuYdhySp/oSUlNOsoZSVPCcf\n37PG1IpXb4AwjR8TPC6wdmcoNyq6D0QNUdYFD0buSq0+ZGVT577UTzN5E01Y\nYtyg5VDy1Nz0rTKB0SAZVZHRO/DFg/7+HQn5ukjFmNG3TWMjIevRjwDRAYZ7\nn3bDgSlztiZWhxMILDpTHT1+v71oj7Cmh460juYJtU8cflT0GSrHVZWV0OAp\nDyyCcXyIESwZGtLWeHTGwZTMT4MzpyAOvZS8Sm2guv0yo4rTJznMOcy9/a60\n/8eTLOJI6lCNp3Oi5jZWYojsWcyraNdKKRJC1XnCwMFQJR6tkZUbt5GNN0su\nvTg2\r\n=qUsR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD85dZmbHJWs90NchdvaUb8vp2Q9vUxkuixnmPIUXZ8ewIgWlWP4ar+ukh05Go7cuyoRnuHpq40geLnLOFHDNhdtiA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.43bde144.0_1590604162539_0.9350845383285948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-ripple":"0.16.0-canary.51067bbc.0","@material/radio":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q11NQmFfau7rxVqEj0ApTucpGEICbM+X/9pNHra/wfiJoO7wzSgAjKCVt1N0p/cBNs+Ny2zGEbArg7fenI+U8Q==","shasum":"dde28dc35d2255fbec4c440b00cb7e898f2ff788","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.51067bbc.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseJCRA9TVsSAnZWagAAmXwP+gOjeGwhkLtA3gBLwCAt\n+3SWff1qQGa2BGd/AR1scI6Z+m4kI0SNoDFH/pnbB0Wuuz1FJat7EP88b16z\nzfcRc56buxbYN/gblFbPuIcCeC1/K8O9Qu4oAE2ccfmHefB5UAcm6sHUrYjt\nO1vnHnWdgQyOsh2hjXx8fN8dXo7QnCdv0SGMQkXSaRa8kEBMj4jSBK23vu9U\ndBfsPXNHOCNQ2TUqArUCxiB54+ssN4l9g6Q0t6nsVBF+zcADW+chh2DeKMdC\n/NVMky55KG3fG8k+TwbNPRkQWxTwhMaqPj+qOf+m1dbtpR9SRxbD2SXblB6k\nr6QShfqk3L+5Fe0Z0EM9C2sEhrgoWT9kRptD33ZyCSCcHYGVjLSGJKBkOW90\nE09HZj6BuOixNmZOWdIfCLqYC85suiunGNVD+RtsIn6NUCGyJHzHXga4xdRm\ngjvF9yGNBMcgdz5NCsKY9hJtjn9M1DN3stHnGhGfgA6T5wd+4nUbRwQRvh0R\nlB0GWX44wCi8EVc6/pu5zqqZkHpqUWPTp5pKYQetjaqaSGQZt2eMnPZyl77R\ncp0F+g/qfonkjdxB42KyhYB5YQolJeE4AnrpPS+MhEZ+jpFNE4yubk1ugL6U\nSiqX2L68vWcGP+e07LKcEGIDAB0DYw3w2N654vAkwqCj3k572KzXRrS+GU7T\nuSXS\r\n=HsDu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuqtguwOQ35ISfq/WTz00jQTU4T5yQ+ZqWAqTQULaz5AIhANJRcdYwWRn+sGIIyBmY0ZMETNXnBKfclmRmzAaj/WgK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.51067bbc.0_1590609800659_0.4357045442573524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-ripple":"0.16.0-canary.92751ffa.0","@material/radio":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yk6Ix/I8IWGLEEGUttfW+dg1vYJO8iAAnyR+x7YhvzZeOnp6CL4tT0NbZFn2RplQCyqv1dAeyjxxe6vJDEsOGw==","shasum":"4e08eacea702841d2c4773b60bb2af54f008430f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.92751ffa.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1oCRA9TVsSAnZWagAApJkQAKFMZQnSdKAjfO3U6Fgw\nyw3xoLIopABNlhBzE9qCwkZF97a4wRsCwHH3OJryOfLTS3VUcqtW8uXcT3F+\nKVbQGUeTuMr4pPU6rekEdXimkHBR27zs3i7FF+z/8DQI2s/98UFogbV1F3Wg\nOBtnZ3b18NfvNwrvOv5J88H1LYxSAtMiCJxBgki38xO5/5Z9QQt0mr2fBo3S\nFar3mCvbS8Zjp+HREaORUWZ42d/dfwLP/pPUhOBWvhmXjjlwqDi+R24lWSua\n7JGSfVciEB4zwc/rMmQKt+LBS6vh/TWxrsY5OCv3D062WuXbrNtFdCAwTIrN\nkRV64LFL22zoNRAv/XfWxxCj7UQBTFQPREpn6IqTJeIcxb5eeoNeXNIfV61J\nn5hxorXnm6+apSuA8voonpr6UeuoTZfFfzeVvaNGFTr7mZSgATv7zXUXh5Fh\nymwKDCpgPQ21mjWMAGRDqsJEcgnGLT7gsCI/fk4t8tfFHQqcY/9AnaxvGhFC\nQkd0Qkd1llIZ9wPtam93KQYJ43NH6oh/jx+/Gwx7+GNFJ1v7rY9XDoiCeDm/\n219S9QHOWLmnOQ8iQ5hfgXp+LCcI5BYZ/95NJr4beNRMerk+qJVv6i+5OpUt\nXxG5Nwr2KUSjjUxE+5ORjy2zbINt/x80sVHwjKfaVjd3bCW8ePcfpJDw+K+K\nkXPg\r\n=9J/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSqueZ1YCJ1Bdof3FACUKL2BI6c3ZkAGtutcfDZCcQUAIgOCEWZZglLwmbyl2hTsqkVCtRMPoX6oJhpEpiWgnHvrE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.92751ffa.0_1590615399601_0.12995456247883075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-ripple":"0.16.0-canary.aa2b40bb.0","@material/radio":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-M7yuEiwFgaFOPIpfCxg19D9/ln3aUZfEeMjD3FRpPH6XHxuUvgRoBvITh5+Wp+apJT6ZJ8kG6IoPQUwI6KTC+A==","shasum":"9a8c89bff8e52f13d6060f2c4993df80251cc7ba","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.aa2b40bb.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2/CRA9TVsSAnZWagAAlXgP/j2L6Th8YVZ7gw+JaoeI\n6SDPeGAZ0xanO9sQEPxKiQfGbGS1LH21S+3xNtwDR66ofl6+ndoD5ofylxeb\nOUzh6+mFcqy2kUkb69UN/0DoEMZWkshJuxqE47FZYLmk1sm6FoOyXu0O+foO\nFIVzS+24b668GtORuV7xGP9nXia3untn9Bt+qFKC7S9T+K72qfHwfORCASYA\nOb6Kj9AdYRHG41gKRIk/42WFkzywerT/bS4gT/EEfDxpUTCTViE2z4n+DLom\nmWEleQl4ToGay/HhElfY+fltT+7am4NeuWPRiP/6kiimCU1rZdA+MzGsNDid\nhfeB9238qzLYMB15iPAoZjah37VUPdtID9a4B0GFPseGko/9QryT3wW1+Kex\nkElHhO66ljuhQET0TAIgwDCfoM6buepMR/chRFwLWoD8dSDfCFLWwNKNmTTv\n0se5kQmh47NoVjg8+bAnPGs7Lvzk7bn6fwO11QHlDWk/bWJ2YXXmCfZl4qq3\n+8shf3caiALyzTVghNs7RRJHVV/u6iesK31Cq8fhg77mdIouooll4vAbhaFz\nHH6q3Epu10wHVnHN2L49Krpo6g3MSV4qHpN/1b4a4h81Q5la5zL6R/+gtiCZ\nzZJEy6oorIgLLAcqIidv7M3irZGdWM2lYT19CJm7NbOO6dM4Fa+bB8SGX5lL\nzMbK\r\n=YsL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjxROnYhIYIjDyVxLAIxo848+86naVZrufZHy3LpFJMAiEAgiQWA4kXerDNOlNGbcitCYDucO2e57vymmNkAqm/4tQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.aa2b40bb.0_1590693307950_0.931557341901549"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-ripple":"0.16.0-canary.1a870a01.0","@material/radio":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wxExCwpDfh2+0sq21ZYwQnYa+g9jF3C/0BCZhK+z8xAsCyEQBWFweGI8hqBU1Qzm4CDIw7lgTXZeH1CfhbOmDw==","shasum":"660f5fa868a52de61d209475a8a67145991634b5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.1a870a01.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Cq1CRA9TVsSAnZWagAAFDoP/2bp2fir0QeYGDBN9xNc\nFr+qvHcB41HxSPETpkyjFdn+if+kCstJwH4JNtzCbdW7KMQ3sSPTs4YC/uyC\nrL253bSuVi8HlJBvZ8CbLidmRO749CH838tLFszNCwqS39x3CBDS8DvEWIeK\nPoCHDsXHVyDWU1j3gH07y86yZyT7yYlTMFThpr6jqTuTUCtNbieAogwsNEhC\nMI31u+zz4qO3i+7IvfRxRF41HyY4IcBxqImj00oe6iACFlptJOsQWK87MNG0\nRBxsvJYiLHAqqPW1hVPmoxaaiQyfbWp8upet3qgZQ/IHrAzdpP15xpjkZtBb\nSdwQf5vNCJ3yfKjLJi+EFMuj5H/xMVr3+WGQsh9b1KqzEictrlYEXuAtWtHY\nm+FZU6dnLdITFOv4TrUE5mrHaqK37z7boH3i8Xeeicdsq4doFKu0rPOmQuN7\nECG0tLUu6wGkhSIc3J7X/xO1O1+BqrXawvm4cLAzwQnM9twpWO8lgs+VCjjW\nD6BjLd29xTclaTAfqnFClfbYrRAvzPF4DeugXLzuF3lRwmHSO26k3LyLQchD\nAxqCXODxUgdg+IabQlq2brl8/2J890EWN5ewxuPvL3GTECC6FZssSsdrrA+f\nJaEJPyRRVh8E0qepCS97Da+nj8084JW5qtckLCsxXHOmfTl9ZVd0vRr3BZwI\nrKb9\r\n=Qtye\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnpDvoLDbGosoDSIuNSX4mEt6efNAhBwWY3F/x5dOAygIgBeGBkDgGIk+nxk5KMhuLbkFLf9uJMRq5WT6LmP9vDYU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.1a870a01.0_1590700724967_0.9740242959118548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-ripple":"0.16.0-canary.ad57d086.0","@material/radio":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dfbDGlCQMVkv+lAZInXj3AsGFopxYFFDiEFxpGf/PaMoU5EM0BdKS4EdbNwmFOoBVy1MfSuSTHupFZKAWZNI6Q==","shasum":"680f67ab686144d05147ea77b820e47090315eb1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.ad57d086.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9/CRA9TVsSAnZWagAAntoQAJbqcGWtCKZbfN6aU6yi\nZ5SqHHyAKKgxoSGh1SopnSQ4yseWdaS8jjrHfex2Pi0w8t6Wp7JeotHEcXH0\nNITh9o6y4KN25NelrGPMkiSsCNk7idDT8Uf+uf8+G2DupRkIgntPL87+N574\nOMm3YwqabuJ06g917dFwe+qA4QLyXyXF3HSKJYv9BffFJTnWmhxJ5WBsl2WP\ngm3bLzNTBAtUV0jdtFz/djoQ0nLWbFJb56K2hh46nOe1lOi3Irg/J9SKgRrO\n+Ayb9EHPqoLa1aPb3HZ1ZZlHa2iJ9Y5HNepa08JjilsE5RK3l2b0xbQDS+TD\nB5hqEuWTo4yTc3snDsBtI80LUvUamsEDUkzjbX7lsp8rbGrG/zIrldSjJMYE\naL9qJuCezsmWG/q9DPR3zRtBoBJ4u0XiNET5aJGmcRJg5/m/70+23AQBuNuB\nRb2jJJaO3z9BfU92j1t/6KjVo+tPHfJ+ojXuIIEOp7U/ohUy7t5YMAzW/ENb\nM/KDJ5UDSrWy4MSOGbgJ4Etd1+w5/2lbWnOP8eQYvDyBBlMxwxW0XvbrIsz0\ngjdkdMGeRpUZevk9gH9W4scDBnV4I/z6p+ukin4ssNokoQmnM6ibsTzlcCVQ\neyYIVpE4DdQ82jL96IP8hXDnJm3AEK96SF9Fv0h8h1J9c0rydesohJJsJ05M\nbhR9\r\n=oZ9X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjq3oA1FhvjxfQ9Phm3x+wwomKlV+RuATu6ZTrZ1s23AiEA0x8abtMhzbUoFrdVS8Y5Xo0HLKr340gyPS9D+yO74mY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.ad57d086.0_1590796158755_0.6334933011942172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-ripple":"0.16.0-canary.3bf2b4d5.0","@material/radio":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-51OUi4EfDm9HAFCr80H7YRm/twMHc6eaFpPL299pawDQg9jONOMpcwJ+Tff5T0X4dLhuTqzgH3dz0cCqdUJmAw==","shasum":"1e6e8e2cd3e45e6ebcaf49f37fe8a2436882472c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqfCRA9TVsSAnZWagAASHMP/1jVcEPJVqsJeiXfw+/q\n7d1wMHMZNghtLA9LizPsZiTioP3hvEtosNmTm22wT2WSfDzWbDFteLtjxB2t\nayMLjiTXpjQCAIufD0w/5I58Ly6jqG1sAjae/cAi/Ezui+Tm6eu0WRKjjGoU\nIlx6MWhGT4R+dgTBn36ICYgNccDrL9rNjIrI2LxOahk4OYtNwKM7LkSPCsqy\nN420gPgx7cmNGYjNdc3Nb3wgfETslxVYlBhjjwZrjp0lunZEpWQnzdUhs2Ek\n8vc6ldq+Mp+j+W3vkg4nD+FlhRcYOxVSSg47pcO6z/0GZ1qk5jAq9dgEf3PC\nCQTlBk3wOiH+y7iNz4F6AqA3ijEuxqGpTZuyYvD+NULLXiXE7+uY+LYGrqrw\nIo0lCXPs8kPMdS2gkbxr2Q1xNDLxqEyU00Wp+emU/qSXhx9TFjmUq41sRkyd\nilOf/Ne9SH4LnouUgLXj8nUNsbjJDUR6nvzBlGT/sGR5yN0JFTBmhMWBjcDb\n8fBh5XqstKFGkQFXTzq4p65xAME8TFOSkbauzs8FKbeR/wgs922mmOmKxVng\n3I2qDyGpLUijUdvTCyLW3XBCLUwvtegNuoKJDsvPsQPmu088o+fl3U2W7fOX\nQZq6Gu0aL/Sc9TSZX44XUXQ7OwTZuTcxZrg5UdftQ1Sjx4nTiYfySzcQlzcb\nvjv3\r\n=KBHc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTl2MkfFhQ+9qRJpzMPWUCGwytX10e9y09dnIIcdTdmAIgczVSpvKcdozlVaB3G8PnVNqsWTnMs9DwScz5nm6ZIPQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.3bf2b4d5.0_1590799006617_0.6568279386969798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-ripple":"0.16.0-canary.ac05f090.0","@material/radio":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pkPYL159+pugjTvrFG08WTrZZsRgYQiAHpIR/Hb+06RImhytZZ4tx3/iv3BosdQwND1/prIZxFWzNMU77leI0Q==","shasum":"1e2c82d267c8dd6c4cab2f158c4337e727f71dc1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.ac05f090.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnUCRA9TVsSAnZWagAApQ8P/1xEbGvaGkNTiL9YlajQ\ncQhybvGLZOevDSJkLqQBwn1BXMJ6NL4fqyWJGs+QDt9r2JpB7ZbaT9nthW31\nnBI3isPzzAnTNLJnFugiKBzCplsNG3q7W08iLiElKSR4umve1NUd9Ke1jltq\nbBwngtzC9AlCp3GVUGxap4lhDoD2InRcTMmad+toXzVepUnt/OXEtHrF1tdo\nm7OI1h495Z31ZBla9OnKZm4onpwOZpw/42r3DFHROlPkb/ZoPkhwu35KMsYs\nPYdicfMBBT/TAoqjn02k99g81/Ok28u+AGAHAN3+kgX0P8eCt3eBoOQc8hNg\nS/75k2d6ghRM7MgOEWnEtmHAZd8ULuVcUw4L0dnNkWSDlyq4zOGv0baDyGDQ\nFKFO8nAB+fpgtUacKLuIuosIzdIJrOIut4vR/1GRF0/iHkZto+x/DGWQCpJt\nY7mb44VxhMMK2Y0XlfSPYskpE7PsAQro0oeyCiMgFQjOZ1g+s2NKMqt0/Wem\njVjnmVUqTKrSqtSaOdO8MwZP8W9lK9WetOI5yXl9e56T3J2P0syMaHC6YZiV\nmRg+jJWMnvb2t8+qcvto5SHxiA5TJ1tPVUOPFtogf+DyXUUDL8SESFwASxqE\nZ7BEzd3SMJs0FDNDjgvrJpHCekWjdnjOkQRZ/vxUujoQGxAi/wJc7c5ZiHtw\n0ngU\r\n=dKnz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkVSJZXY5YW3aIui8BR7zvTf1h9tb5EwHKy49pA1CJIAiAXPgNhvzfuD4Nrq5uQExJP16ldHWLzjIY6SXwxLIi+TQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.ac05f090.0_1590806996072_0.46243585576644985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-ripple":"0.16.0-canary.0ba7b095.0","@material/radio":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HAOk7+jCn1bTn5c0U2A6/0EQi1PHHN36Hh8nfjcWw8M0LdWJ7YLb8BLgxGlQI1oe/0aief/Tgjlvh5vBMlYg5A==","shasum":"6950dfcc5ec1dce5e411e96bb347f55156fb46c1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.0ba7b095.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctlCRA9TVsSAnZWagAAqasP/jPNf10DccnNuN9VfWYp\nikZzHY7u/tHE1+jIDO7L1jPB3TfgvyXKdGsnJnJGD9ALppzrHcddLVN53cqo\n4fQOmZsZLaS70h8ewfZ6JFuhr/3x7lm9/iSgsO/4j48nzaRZDOhXAIyAFsl5\n6jJRKz/vdAFwIyMMQCF+ByOopR8nJ4u7w4WP7VCNhZGCPePqDLg+Bo2fIpIB\nRZDq7SOF/2mNGEf+lDmi8quQz0kvaVlog+y//+DFHpMLIpAd/QeX9VuRcQsc\nrynnZnscrcSpnIdfX7MPBecnt3QczaPo979D6nczwdLmV1P44eAim7mMHSdB\n2H2EMFWa3AuglnKmIP9+UCopLx+3lZG0Vo1woKXtrjsQ7rE7h8YT8PX5owYC\npbkdTpulaN3EYhUaIDcvnorM3E1UtAvMm/pcDo5ExrZePlictRGvPe0Y3UG1\nbQf/naSBZsXXzRB3wI3CY2T704zh1FU6NYMz84PI5Jm9NtNEOXp6njG0kWvL\nE2GywVI3VaVfU467ifaxCywm6ulBbvyEM/C31z45vJ1u5tw2PLnkWMuZ4u+K\nM/kTliR9b3QaegLNtMAavb7e2m+HpIT4ZkKJp8uS1VgVjhryFUR9ufPYqYaQ\nxL5G/QZDJgeWhcrVhmILfvDhVzW2Qy/vOiYo9Z8IpP0mVqs7At5IvRHmscSH\nm97F\r\n=YnRF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVxOQfLecrIaRXbDOa2+grL+n/FcO5o2GiZTdgy4h5TwIhAIZIJM3eqo+zjY0HoI/tVkT97faRwvN4ymhwClVEI91g"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.0ba7b095.0_1590807397514_0.248159281326372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-radio","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-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-ripple":"0.16.0-canary.5eaa9bac.0","@material/radio":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Sg4r2V6hasuxpuUa3fuletRdN1hUhp6JTRwanY9+GdkECE71IuI4Wa3WqzQ8qzciQXzpxI3mhe5wt1ioP6g3Wg==","shasum":"4c8fd3487574aaa66accb7f4d6587f8b673bdb0a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.5eaa9bac.0.tgz","fileCount":20,"unpackedSize":114771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y87CRA9TVsSAnZWagAA62UP/iIzUMU7IRSOcq0XTZ7i\nZ7kRvr4ulQ91Faqqimxt/6TErP352+2RXNgK7iZRA/u3Aiy2uC2S5AnpGWFM\ns92xrR1ZiOn0v7X72giEHYpl0nwhLvdkWrbC2Yi42WW9iGPWdDTotJ+K7QGB\n85SNyGCz2iw4xNG2BcPA5Wask0NnEsOoRBPAvkbed8wMFXiR3s0giAJPhQhQ\nE2tt0B10qFmkYsn5orEu8QdUW1M4SKVTk/ILw7KnP5sF19+BV8Uj9ffSorv0\n8/Y7mDvMA2xeXUfAYSY3qmJPATy5Ka/rlsJKnIjKJHLCmi7vWKKG6lQ/vEWU\n+nTxIfwgvKj64cmK9+7gIySWMbODDeQIk7feIzrxSfxd+0q3PzChCKvhpAry\nTLGrPI/SP0hl6o7pEttl4rhumJMWKGVww+mZhVhT36MRqjKM775dLMkHTmRw\nyOBCi+NueuZk8VlzlfsNqNTiUe9zFuwTO/Iqsuy+RElhEaRBWtd5NlcyQDbQ\nzmIPkSuZsWMN0LDwosKBVZbg+S2Jm0DVK8cIpR9vFd1+vkhlbxxgs5gk6hXu\nbI8DRD5T7LLEkgOvMZnr6JTypj/1PCyFeriYthjY+nYKNFUKfRg7f3dKshps\njhoydUNBtgJQAJ7o3fJCqVxeywWovQSap3I17wrUCPqcQXhLFeoe8Ost7Ogn\nMCP3\r\n=0Jya\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTbweHELvfXXxO2VJoIbLfNIJt2V5/k95H6rG5b3kzoAiB5peQU/2eP+nDwNLtFYVBgOt23sQuCRLPzKgCDVxe7nA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.5eaa9bac.0_1591054139085_0.378719638517113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.5677ac20.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-ripple":"0.16.0-canary.5677ac20.0","@material/radio":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lm09bCOFDhCWiynD4hurXmnVPnJ2TBL5eDx3g3NHGJw43BtPwsSmjYtEkcAPm92jECdGa30u8fOKPX6wMx1YTg==","shasum":"18d41b7d1652b544a783cbc90b8c9b721f179ebf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.5677ac20.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXkCRA9TVsSAnZWagAAkBEQAJxWa1UYWnH7Y7izIKOq\nlTH+SRQPIut1Ku2IB3lJ5sUe2SeIAj9/lzo6HcHLnK6ohpEOZPZk+UvEqJ+P\nZLKE5tWF2ElHwZeo2Z/y9PurA41jtJDf1LD2sOjFOmsjupiNwp7ECoG8mNrO\nNVe0SkQ1ymWSaI2EfJMCEWGhf7Ui9YJd0g6i95P+EZRpDl4BE9RJESinMtBz\nvCMiLIEDAtYA+VWJKFxYQm5ai6+SBpLy0Z2J530dR13ms0K0IJGPrVjhyEyu\n2L+VbrvKbNKRd8OTWoB8yKeJIcdsQYbeDFujemS7H+VOk+weXxt5XEZU95r2\n7ekxaBmBmcRixrw/iqf1q9QiZDedLfEX+nR7qVHdqIXGzjV5CN7G5MedWQvD\nPuRMkYpcatHa6iYExq77G3HD6MISMvUTRXuQkl1vENWyKqJMpA8RQiGw0Oce\nbud+qpHbuf/6J+vfBayLeFhBqaLsZQfQshRBKOTGSckwRB403kSHfqsB5Hr5\noKjVhUS1+okmXnLBw1qqVBadpgMzHis5T4XS0p63f+UJpJSZYTLOYZKnXN3i\nK0g6QfD+mydsrVw+twynLjX4qBSJ+Kg6Y4HMxQdh7ld3ThQv7ax8zzdL6uQl\nj8qxIMr1mP1M0brmic9D0EXVllVkxBv/E+0X5VJM5LnTidhpI+6izS+fkYwQ\nkhXV\r\n=7qoO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGj4ds1j8OHdUaR3j3JnEfzT9TJ8CtigkQR80uuBD92eAiB8LoDQ5FkdrsrThlycQDd4+F4WDngJkMEYV23Ez5rF8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.5677ac20.0_1591055844200_0.3715495196409655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-ripple":"0.16.0-canary.7ac6bff4.0","@material/radio":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xFZBxv8GRqSRoxCblReq9cfPlhe+5Bo4pM+zgn9LYNaB4GI3JcQonlwCZUG8fv9Frfr4PgbQjTeBd8183YIXdg==","shasum":"4153ce3aed329178c40a832e2ad6604cbb83cd6d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.7ac6bff4.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZoyCRA9TVsSAnZWagAAkvkQAIFOqZXOz19uh3vhn9/R\nqcTanBxPjrc3N8u41Uqn3m15k9DLdNJVQayCbutu48eglct/I0omwnYd6hQ4\neX7auLa4h+Omb53+BDncmQ6zjngQ2+KtXm/C1TVu8eY/BYYOiBJRZ4+p2TgI\njYeGbvM5tVrXF2Oq04D/B1WwI2JQmK4SlRb/nQ3EzwkjCEQVxMmDyQcUT+q+\nnqzaeRotefbqUNDX8jCeX0JvVDt+VvwlWtm0LsjSMtotCX9p4VFvMG1reQMZ\nwMRD/4cIDRxQABLOt8OjSjsPFuPN6qQiRBWKOrZlA8lbR923RMbVBkVFEs0X\nTBECgDAnefjBMHfwS40Jlw9TrNkQ2bjRtTJ9iBOUvtjeQvCxm3MPpxx0XuCG\nW0WRFg6Qhr0kXW0IhHnGkDfd22yeixyiAXQnGSAVTu2LvS40OxvG8FvfAx1l\nzrlUdZTKlCGNhI4c5Hjg4FXMZiXuAmLir516p/Vl1ckwBoKTXbqUe0J7+J9T\nlZcBPlugwMzXZzpH2Op1MfxoASuyRHYe9kqAKt5U2VawoW13yj6GmGY7kmX7\nOk0i3TTQE5d+op8kcdgQdNpDBwdLcHIF3prVT3xPySHwZQJI+yIVRB9lGMkh\nS8b29bPmbywmvL4RYRPaYzHDWo5M3d4iSeM6uR44L2vXNoxUQOEZV+inIipn\nmU2K\r\n=nByM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfdN+sf5E0+pYxlIRYu8evOWqd7f7qsUtCI1HM3wa1DAiEA5pzrUpIIGRNOcRJBRLvZe3uYGIuum0P+fwJGrR1ZJ+c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.7ac6bff4.0_1591056946095_0.6975872049141467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.d45622aa.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-ripple":"0.16.0-canary.d45622aa.0","@material/radio":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vhn5PjjU6B+J4g9Shhb6tSUcmaHpqmuMIEQa/PL8t9a3fskBuL1qEXdQXXIlBdo5n1NpGOgEWhMB8D8OU1WfuA==","shasum":"ba62df88a1464d029d294c0ade655e5145420a8e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.d45622aa.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uS2CRA9TVsSAnZWagAA/kwP/jODFnxET8Cp/0RgRKZl\np87xMOewI6vOAwG4aVwDu9iH7SPVQcwO9m0ZkKBiT3L7z/vhEuUlN2V5SZcd\ngJ1GxOPs91JWVVQWX+0vPf5Zibv0gpYITM4Dh7soUj28ckK8sOZhFYKDcqpY\ntffEqCDISIZdb9q92dAQzIghB39rmWVq5tBLwLCdVdbDUwZqLw/WTzyv1kXK\ntMC0HUqiLTYMye4bShvRUYeI8bV5fS3S314C2ABY4vxp4XiWVfzkDA0EBS4e\nh6lzpwrUSh48VYzr4UpTM54mqbhAhNA0VOpHGq4iDH1kUDnOzJtaafq/diKt\n+BEpCyprQ+fnAJSKiKIxO2cbsQ2z5gVwx5HlqaDqgTbxH/JG9Kz9IGKEX1dL\njXx/KHECc69RL2J/fFDZ17yx8Em6WaZ4f4qm5F9Uk4iBxeeHtIPjMPEQ4IWD\nDVd/FXC0rThOm0Qm/xV+eRtazZe9K6lPt6R7TeCDm3g5cp0ckOYz2oIvurhQ\nTU0cucpHBWgI+9KMP2L+C45b8mAuyzixzK3JHk6T0w+MZOJhhotg6YsPaE4U\nytq5ylg4Mg1cfyCg7tUKu8RRB3mycEZKEiyBUQKyc1wxDXaRjs4uyq5BUbFa\nga1fbTvY3F+ugaUBodb7CpFVWrX2lP1q83i/vcSAUZ9/eyp1sOYck1qH6a7Z\n+KkN\r\n=UuQj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ91PdytBxIAZ/UA2ns5ePQzNpuB+VhyqTNtjm8b9+VQIhAP/B26At6y9rYVWPiNFzNeYImuiEZ+ELffBOm5H3US8u"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.d45622aa.0_1591141558389_0.44757133158170714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.dc26c709.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-ripple":"0.16.0-canary.dc26c709.0","@material/radio":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bpSZbDFEsMkuezxXCNKvbU1PPWA3zlnLmX68vnHQQjLfZ4HFGVeGJBOgu7sgyp8jWB+d4SPKfJZvDIphW2aj3w==","shasum":"a310d864d0d996350823221c294d01a845fc3930","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.dc26c709.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qk1CRA9TVsSAnZWagAAdaoQAI/EsjfvSNT7g/pxv4QP\n7Ll7YdeCzewEKNT5X8ZFC2vwhL25BGHLTrEve8IsY+FBEnFLvmJtAY4EjCkd\n9/MN9inrYCFW3c2t4Z/Pc7ogQuo02/lAV0WbTOPZp+4lCGqkbMQmXpN079ty\nlCbbBa0EVhlguqDCrG1Y/2v74W6H3HIV/shkKBm1Ep5F7P03zJ0k9b/SNHqs\no1pUBq0Ojapr8GJtsrASAObQWQfKVudtKt58ClEQYZyjeXOpqX7Y6K/DDxo8\nuTB7ilVk5kiZJYK1w+HBBkgjxSQTMLkodHLjTL69OisajdmbHifiZWIP0tpQ\nu5h1+B9Mf6QoLEgO8hXRglB5EPTHf+4kgen1uh+MWWKbErCNzit/4FLEQ9mh\nOPkxc0RcEnxKugpo/UTd0I336uGZbsBN8+AE1lnrSvSUeNnPYDggk1q8GQTx\nVz/YI0t8DiQZ2+JkysdJ5z+kSktS2kjjLtWmCK1bEyNeEivr15LwEH3SnPbb\niDNTYsbLYv1fltzRSbSZBgm6dgYhI/bd5yyL/eXey4L1PZD6gdVpMFIAL7l4\nKPxJazFTxCmtmsa2UBUg9gV+/QD+VQ2XQIUyiQiw7dvXVmY6GgFFGnf1O4Tk\n79qiRHtwa6hLzKLgyeQ5uK6DtZ05AoovLJB6INGzYKHj53gQBxV4J5LwYys+\nUnkj\r\n=nzlg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpiY309ITlL9MA6qi8MjIEV4qQqOrX704wo3nHDsoRZAiAfHkqCSCF7DdxP3G3GWRH3cQ3pfWjTTg2uMawkgSud0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.dc26c709.0_1591388469603_0.5699990364509431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.b9baf6db.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-ripple":"0.16.0-canary.b9baf6db.0","@material/radio":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-a5I8gPMlhYf6nkvsakNWG+Rpfpa4ljLAQj5cf4NOnH1lJjDcyUjeWwdBmLPYOTy1WlZ6zinQXr2CvWoC5IotDA==","shasum":"0fae2f49c79eef6f6f2591f9a6eb66c975dcdf93","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.b9baf6db.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmKCRA9TVsSAnZWagAAFTQP/iyXXhLtyxEc2sVvf340\nzUlJM5XVa+s167Q+E4LPCmEFNGd3lzFrCEdjB1G7Zt9hlHHfOvbva8JeA9RY\nsNWO+W4ytxlr3rPafeR+zLgU1w62pw1YlrH3tCPEjz6uzXTJolxBLzVKOc29\n5u7LKq7dWOwsm4X2J7qV4mazGk9mQ3omt8o4W8gKUtykzQ3G6TcLgXYs2tU3\ndyIjKFDqOxy9/dMjRQVMw5/TBMswJglA8QAn9PQTFGVE5D7qYWLNAHYa7AT+\ntiWPrp+SYYLC7nrRO4alVWNZxf6T5CnJPCRQtJwis62lvcoVxuMgJLI8zC5g\nQCXUi01VeDK40GuhNwDDIHWtFtWVBpTARCEXbyZf/ZKrCipfCWECeDMCCG3s\n2u3t8oYo8MkXWydlkx5FtldO5pid8Dd1Q9SX1ECZSNNgjJq7RCom9XrW6up7\nNZP3RffkZHygWgJ8RDIZ9zr1tMrO6Bf8J2C+IsLzfUeQumThIDXaAnrdxa1+\nJ4HElmnC5bTsDBZCVyrcti+4yoz5uJ5B6UuY1u0r/n1qYvHd2PUG+XYL6nXH\n7rmdXIWKp4WHBsCI4Bg1xdC0qwSjcRQ2rEogPh9zduMejcfZWONO4sELnDop\nbbCQqaZtn2e7Rl/Rq56RsKvZhRGbM/XRELpsU0FpN1WWAGF1ah/EqyZvQ7K+\nbMXI\r\n=lnO6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxhi0OO8+M3iev+wydBmYRB6pe7+oO+p13P5cgsp99vAIhAIiFdAifVJvY3vid9xTsdX/YsWGRJspfX806gN+JzDCW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.b9baf6db.0_1591388553986_0.6472236340493942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-ripple":"0.16.0-canary.e0b8c9d0.0","@material/radio":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q0kMdGwOb/lMK6X5PIumdazZMXMldmXX0q+PnW8lVs6nccX1X0fQmLvcoAMWyuzQDS465PuArJwyuiVi6ocj4Q==","shasum":"581b3fdcda92a579444e989ea7da47328eb7e76b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+fCRA9TVsSAnZWagAACpkQAJL7TYcsp3ijrsphlH0M\nsJWlMwOrkOEXq5tNK/ADCejnodPqj8AkCFe1FWu+kKTHYIx7Uwi/Z0Evamz1\n5z3yID2hXkqzRO3nk7Pu9LUND4TF8RPKXYL58frDjqBSWaE1dQ7vfPCbcTOA\nCU2QXOCyk3bOhBEC4iLIk4wOlXm1QLldPLM/Lt4YY16/Bgnm9OnVkMmWI/Sz\n8/JNoaD4CVII0zmEKSte5NrncCRUtY8RHOyHeQlROIlyETd2qURo/vf8hC4t\nbWmWmHVy6ucL9gESdzbC9cYvYMrP6UrL/JrarwQLylyQWFU9S0QeeupwOvKF\nSV8/bQAG9aEgT0m7NyH+KxnVzCzzulg53ORo1taLJoVmePSNkq6Hw3R3YE/W\nOMYvZDm6LRzxZ6l9caxQsrK6mU1t6PsDZ7YUF4yaEXdb5gBWM7PcxAzgBSfc\nmsUyMDcJKduAOrKrm6JiIg2orCkl+j8MqrQgyI0g1hoAo4JcOVO5099aLPI1\nlSJC0mopyb2z2u+JWCnwrKfymdhTWs2UyG+mJ5Z3HDTQ3D5CCmY8cxF9K07C\nXvwztA2ApUA7jXlZEQn5gE1m8A60IlgHT5qlm4VneqcgWFCbfSIebrKK2a33\n5YH1vZLR4S8LK+pwkpJh/OePye6t48/BNyfWBA2RKo4HStY0nxHwvrNIFLhb\nIs9H\r\n=8d81\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlPXBTM/FNcr1stjfNZWbw6tmhm0ViqeUjX2l+xINTaAiAw5ec/46T5jO+pfbAlbNAzMT6SAGiGQ0LcRGEP81cmpA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.e0b8c9d0.0_1591398302543_0.03763802036442421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.51552859.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-ripple":"0.16.0-canary.51552859.0","@material/radio":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-et/bqwTg47/DjKoEG5VHI++SodAMYA3YCHBclkjbZm/6sS+Z4jCju3wiQcE6QNjwwd007i73rOp0Uk9cYtjwUA==","shasum":"d57b1164295ec2ed40aa10ff07e2d1d595daf790","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.51552859.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRwCRA9TVsSAnZWagAAmUIP/3Z9qrPktbMfg0JavtuF\niQx6tGagBl8fweLM/CXWQ2Rfu7Kx5n5YCYOS1x8vZaEe+yN95TFrzQ1AbVa7\nZBu1BKwdnDNENsc8AaVc0OtHaGx2WyhL1gAmtxL9+r/oo9Y26/aJW4QbnGvS\nfuZ3NHXKWvKjMozx4/QVdpVElANmmR6EUW8tPO4qDvLo45Ybppf+tMRepL4Z\nspfFCAiN5hijZPF4gJvtV6ByKgD8HaJbcGG3++BcTWvWgq6G9IsUBfSPc5va\n5QbAVf9pCtzGWYLHmAEVI/h+FDNA3MTgWkke7A5b36q2ohCrMdUosi36rCuS\nc18UDQZ0D3H8Odrdzb+06Kj6deLKWLZtI/Fvrp47TgMqgSB4UMgGS/o3WhSM\no4Z808O5htTCIgkjEbfbk7B/9PVNE9bsRQS+xOJ/1yzWnVgCoLpnXzyPQtom\nxcXntTMo+K03poi1N/HltnlZqzGGf0n2w75pHhr3+BfC8xrbImy7lOZZrK5F\nK2Oo60YsLrJJUfuKDFzYcy/bFx9SUUH2v2I1ZDQ61U7cForC27sTjVE/mIHg\ngEqoUQyO9w9t5r6Wsp5TpNarBv29LYMlfG+zVr+PsQzSThYfTtNo5UElToJx\n8G5ImBnXEG9oZpY423K/L4b0yJswHly6B5d6cNHRIOcz1QN0kIWG+0hA4zSk\nS5Vq\r\n=3A/t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+wvTEvYWlan0hSUC+hZE0fzmkUkWysAXgtXiGMg1jDwIgcAV7yW+Lq4cGOEYPERqGB2v096yrC2hWGTYQQUQNibo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.51552859.0_1591747695870_0.6102985088988859"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.2e269285.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-ripple":"0.16.0-canary.2e269285.0","@material/radio":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AQrL7pM0+n0rGkZtFfUOvMioUqzprf6KVMi6AqJUCcNf3J0MQGUBshxB8tsxtv2OuODQEIyL7MM5d8jVl1LAWw==","shasum":"72191aa15e293645c65063852abdcc42e1f2437a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.2e269285.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Dj2CRA9TVsSAnZWagAAmIYP/A7Mjhz/BzI1r2N2dt4Y\neih7qF1Ic4WAvpoEpTSe2G243+67IGEOFqFdGbWGi/99CowMU5+JlsTjRNez\nms0wIDrWJnmghxv2L9b8+XRAszfYsOs4YFEUd25kygwuTspPwR9wMmhXjO2T\n+ILlL/Rl5I4xh7E3Cx/ILCUQf282N3ko5XvNWrNAu4vUCtg5giPILR3JhM0g\nME589pXNy/Q42cutCs+Ct46zE9AutgBcRc1fSbozTmSFIdVK8iDeBF2COsMn\naXuqe2X6GQRVv7sIsNGl96WPGQa+BHdd3tz1TPwPBahVpjcQqahJPXqklweK\nlLYKCfjbCqSaatB2SSoSwtfIJZU28tym1P7/3pcGOyaidSCepVbf+0Uj0WY1\nEqROgTJGUjOVhr/4YMN9Ip/7W1HIz/xnNxklmTVhchwZJfsttOLIjVg+55vV\nEOzQ8d4R0wpIRcuiNwSKr8hengmssfFNkO4Zd8p2nu+JnGWTzhxg6i+GoYIg\n4wI00f1V/vo8VRsBsViC7o1Ee8dqBz3xRYoRvT6OzpQs0pTpldsvHWAhlY2U\nvEVH/VTm9v08ra9BtZh1EetevpEjpnRpzTHaMgkIEZW/A6NJ8QzeNn3JysTl\nVCYtt9glonnoKLx1KJHF1aRc5mezMSlgiA+bC5CjZY0cADXfarcfz+cXtVxF\nKOvM\r\n=W6PK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk3et8AbawjbvS9QJK6rd/U7LA8oYxhnLJuJrMLp5mugIgUS2Hnsqdlvmiq2Kt4vIJ3SzOw3M5/7BOwQ9utjs3FWg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.2e269285.0_1591752950228_0.4217421373210197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.be138b01.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-ripple":"0.16.0-canary.be138b01.0","@material/radio":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-d89QyjJe+dGOuRJN/MIOQtH+Mw1apZHCPOkgzISUIhTNlXu0Tgmx5ifdhN3tfzWfkvhdmE2obbdPlvW5+f+lNA==","shasum":"98c538ecea251f76f382bf2be630ecd80cf8cbc6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.be138b01.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdKCRA9TVsSAnZWagAAbfsP/RQ5Q+AzWhjlxwLhKRPy\naOqqMthTvIOb6JFRmRA/chxR8Q89uDZtgnFd0nG/so2UxYPSkwd1C978LQkH\nROKOIQFOkoj0QnuQs9MiPGfO6bJLfeEELS9FGl6zfKiEoXMUW2FACzODEWkR\np+7plgkH3eKnQJkB3JmQSveFfChg2Vx689lqvX2xfjspJj4wfs/VHUA8xbFb\nVa7sM6Hp0QGxdUL0iSmGhj5ModCC8rt0eSfLSJUsloSRSv2lHv0GqvU9TuFo\nIzPnzsHRLM7eyo1dO/K0p8o5Cywb/Xa5+ZlosfjEdu+Y2lhE/jucTDmxaRy6\nPvBrrzs4rSrnc54rmnldhFEXd+2G9Lnst/tLxuhlDnQzXiD8kl0lyIFlQ4eg\nEP+Z2689KRA7KZ3I9tPhsrd58MjTg4XUElZpCr51Lducoq4gVA9Tt/NugwAQ\nOHfrKL8P5KQvuGiT5XlBNOLXONXhO55o4vRHYMa/HtM6nu1d0G+de5PCq9er\nrXObh4cxGIf9gRmIWMeCRff/I6/Unbxi0wVw89Zcif1eWCOGrWhCcet1r9Ei\nlguuhc89ugfPP+6aiO765x62hJnOTlBed6y14Qw7inGntHe8llBlv/caWtyz\ngSIOZV8wHIatTSaP16gg+k4JN1arZWdNj0qlmnwmHg1s52HNA1N/0haL3Aey\n/2yo\r\n=CcNS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDY3op/Q1iyXzz7dinI9iBOQbt6f+mKtYCSTXDERrap8AiBETH9iqJdefb2l/ixCPWkPAuRG3ARNgdAtG8j1vrWvbg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.be138b01.0_1591822154119_0.33773697428996075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.04bccf5a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-ripple":"0.16.0-canary.04bccf5a.0","@material/radio":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EcrF8svDT/IdJse4tRMn4S6UZhTW3EBH2OwA+tKiG/bRw/CAQ9hE8IjwGZDUeJxoCpEBKUE9LGwd/qAw8OkdFA==","shasum":"09efedd75592c1793e68c70019ad7a8fabe33ea3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.04bccf5a.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BlLCRA9TVsSAnZWagAAPucQAIUZzixBGHnx/AfyBMjK\nDSX8S57+Q5gnL3HLfFjI6R1cbExN6XeT9ynaCZ26kzmuLSuSMsrnD9g29aeE\n41LVUXcwjjRTD8CN77z8AcT/xkBekWQSwPSrLGmVQp3tj1bdSdxHjBq7Pilo\ngtaguChY3xaYJgScyVJaJrueMTI6IDk9jVq7Ge1tS6lrgR8q5slOdSeg34De\nJBYah8my7VxWVzXSO4CcSeVtOiuyc+M6ugTr3NT83BhR0MvwfUo1bhsjLUsQ\nNbVV3TUtibj2TT2+UJAV9ITzscenc+p5nrPxULgGQ+l7Ndtx+ZrNPJFzvZDh\ndiT0PHjfelAEw3GcPwNHFnbLa5Q9WHSCqNyJDY+5FZbnXlntxFedN7Tv2z4M\nJjtVWSFC3SoNQWJIZT5sKFC2wNU82a2BHPxkVfUtE+zPYmvBOC+hNBJ/r9eI\nDWlxrMzQyd4VzwdNgAAnbSa1v6jBOHgrQQp6T0gW/mVpd3XIGqwPG5QTOdtg\nb3SQH1UagxujMDwAEFP/tKLjp3mlh6mtfPGSUkhNStsVnJw3Z9xu9zPIGDik\n9bLeW2jQ4A7ZWTIRXTiU/QPQ5Y4KIh+FMKU7iVQSlyOdwpzRGUI0HiVBLxor\nuktZ2/yiVSvo7Wc/ObEHzYcZfMVNb+2DyIZHo1XqbU65mZFwjoWFMOiNofcs\npfds\r\n=JKNJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/e/yM12k0HQUOOqVk+XRNhmG7zSx3i5uQQZBJvMWUqAiEAh18YFZgMVRdYGQ4+6YFeskCWYzY4E30NrQLuqVykYM0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.04bccf5a.0_1592269130849_0.2587889421007168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.b44dea36.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-ripple":"0.16.0-canary.b44dea36.0","@material/radio":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FtheZ8lHUVb0s5O5Fje9vzQc7m28mMdzyIXjnUuM3n4aAzi8ZyEcnAxevhKJf2sqc3mh7yl/lOqim4yVcQ6ahg==","shasum":"d26f725154430388fd3fe69c0bb61247ba38e8e1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.b44dea36.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJTCRA9TVsSAnZWagAA/gMQAIe6vIcZp3vKywE1i2nI\n2O/d53RLGzMCtYdGznHEigMVRRSS3UDGP0Jui13mq6lF6vj71oLxzuhZ86Fy\ndd48j/VJ/JxSqf7P/p56CZIYlgHwWY9wX4gHIXjyqwDwrlt8YTW8kpe4eLKE\nHMZl8y7Uozp+xZXsxcUszph2LKtMLvy+R4yM1jw4KPbpuCYQ68l2ux/dnhY+\nVeioPhO9aHE0dZ6nplhqRrA4UibIn7IFaUNAiG8GEtP3Akeioz3HHedR1Mrh\ni1B516DqEacicOsTkDSIY3SNUCFwHM451QltG8eAOMnwFCbbGUDesDQG74qN\napBBB+co0Z43skB0xQVyvt1cWxiFkpigyL/HeH+XQ2zU6FbZ9xMYziVIJP3F\nfE7dR0413lK6K0YtIxZe0Jpgb7a2FVvHbgYNWJyS8nTqMafOEaYstC0lCt8t\n0a9xY4FqRD2TO56ScOCwUoNXuXyI0e2issugxTSPlvCHoJX54U4+t0bvTrzC\nwy6L+mLk54cV2pXgAunFnFZAslNsSoC7Ln8eoobjT3Fah8O3Idc/7If2khO1\nA9zcy19xXFT3fHHSnFsaeNWgOJHgUed+UW2Pr6owfKLF7YS0XkqpgR1rKoaF\nM331C6uIR4F58ibb3Bqt2+AY/U1gl9lO1Cpk2TzXPwNL3sojlrL2SWQZTxPc\nFXlq\r\n=0rIG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI9amFEbVNea54Jis/yoLH1EKRYwxIGN0v2hZnP87KXAIhALXgRE8OSZLR0l1PnHL9ETd7eYF7R7mMAAdOQjO6DM6W"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.b44dea36.0_1592341075120_0.6980854971097286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.e2577e87.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-ripple":"0.16.0-canary.e2577e87.0","@material/radio":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kkMUwm3mZ8XzmrXL+SuaD80y0GWMukhWh9nO5YTZq3WZnxN7IxMU9Us2r2Hhfki1aukcAiZS0sAfseUa7FFDLw==","shasum":"13dba2b49a8e04f7e96a6f4b2911766d75ce726b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.e2577e87.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTgCRA9TVsSAnZWagAA+AcQAIBu43QAqU6fB19GwwbB\nSlPibiXx81RHFOkwqZgSW8ayjQpHxPFba2+BPcqV66BNSnC1bd12P7WdiN/z\nyMbQE4SipaN5iufosDAaRseafJCh7UiULiErLWRoXveaGVG0SQyWfGVqtSUh\ngchKS+Wporj/7biyH7lmZFfBzYR8h8TcE8jGkcwYrTcozxi7Zhys16vlWmVL\nnqdKSC5i6KcFyCyYzvmt+g1Ql6kbECRFevvjBUNAmo2Fw2dRoqTT1C8DhS3A\nXaW7/rfzYvuhjnsUgN6iwwp7VFCZeV4BVN4BZVQyn61wcZffcBwcxOu1FmoP\nAY51dat64yXCeSc2/5pXrzIZ/USxIxP7yd6mgB/xGaG+La9LHNpHuBVWzzds\nvtib9sd984yEurAPz+LICWRbusylQ3JzYfSKDg9RfJaEOmOTU8eQSUUnDF/r\nxhu8+Si341EnHOsX6lZwDb189P/1Nh4igbz05QjTY0VI7/JWDkDXvNyiswiE\nBnnHyT1ClfKTjSADLKJqvUws1nsB+G8Kp5MBQg+dPIqfLG/VTPnAYXkInJxk\nY/EnbEBTCYbqTjQAwtlr6AQvBkgh/6nPjLb2ycgtalDhNsB8KTtrwghotOzU\nQBBq/2wO/qzN8LMEu12ABf/Ugk6lRGo49CyMjKwmRwlvkgERzWOyxLR4ff2l\nVTGf\r\n=95tu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2zFv/K6HABbnRGiMTboLGX5WbBeqqsTAgpQ+HuzdCEAiEAg1cqmaN4i9RpSQhI8vR9KzWkbgKiiB63MXswsb/Wd9o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.e2577e87.0_1592341728446_0.38819939331618314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.58b73343.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-ripple":"0.16.0-canary.58b73343.0","@material/radio":"=7.0.0-canary.3aa33998e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vFfDRzfzNY3AZQMvTmiNZaGLsei2FsrU1akujG3io2E+krcxuTylP3F9ZVCMBVuv76FntZhU6Xc9/jVIsQEbtw==","shasum":"0864b32b3d83623b5e9e9c4cd5d95d8394a96584","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.58b73343.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThlCRA9TVsSAnZWagAAk+8P/i3Y3Eqp3JM/H23hj4qQ\n43T7pCG1vkaagsKu6jO/VRf/jgNqT+rc7HHWIb43XpgdXgJF6LkS5bwFDvBj\nbpt5r0TvZmCCKgETCVkwe9giirUIV6FFvNeHXJ4L3mubhZzK4UEts440f6Sb\npexecXQVwYWKw6PvyTYls2xuiXslT2AqTkH4gKeAlBVGtJMSvmSO/k08/n12\n9Tz3LeTxfml+TGJeCDkhqNANbyFyp3FXIH2w0vYVK7772ff2R9vuciw2uV0y\nS2tZit22Jcbq2jT2llrFdmgF8cFyoW0yk/2zJPY1FpiqmELP8b4yKyZpax6J\nO/mymIfHkLTnJR38S6hzlmnnQKRx9hWCvVBzRJS8PywBwZtO7LTJicKf0wRv\nbtZ7ntuAM/Q1dVf1lOdPM6sga0KDED8C7g7SK2U5TjMK4c8TxVyhAUcVixlQ\nfCSab44yD851NQaSURtaCpg98+mMwUsALrhyW52m9lDjkeyr8OhBgz0/Bzr1\npBq0fpIpMrSpUKYS382uoMqhmqciu4PIg4MHc0XAjalUphynzLLjIOtEiYFK\nkO/31lGgwh6j9DRYOTdhddpprBDbngRQOJ2Sx2cLcLL0jhN0QpaV6DH6D3vC\nHM+gK1TQCRIJRMX32c8MlD4En/GSQs8JBf/fFw6tdKBP/QsH/dIh5JwBnc0H\nhthD\r\n=Z5Ft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmcJNQmpc4RTtjjbQCdLpGytGGhbqo0bB6xAro0Khb6wIgeENUdOuzQAI5f55L09SEIgwjZidQAk0s3KhqremUW6Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.58b73343.0_1592342628808_0.08057654739871545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.f155c058.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-ripple":"0.16.0-canary.f155c058.0","@material/radio":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wiCGNNz0TLTtMphaPvOsgikf/wCvBUXaa53J4dIogMoJB8C7421O7XWSPCnwh0fbDBqNQVR7ICUJziOMMsJRVg==","shasum":"bb96c1f6ff6141d5902be14bd572e8ad17ef6a58","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.f155c058.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661/CRA9TVsSAnZWagAAEMkP/ApICR6ROOCOKhoZ2s8l\nKOZWIuYyQc/uc5APIxCup8WAtZE8XA/cly8P5naX5fPSThz1Ew+ywCnvmmzS\nvEIUsFMyqsOLmYMOBVWFXuBJclYQ2B5BsJcuxVOjzVv6sHwb98WJhgQgFEEG\nNypF49ifJpQAG7SMR9cCew+c25eOyNp3JjPKSBpH/3xywPh8bhUBp0Xt5vGV\nmRsKj6BPtjmeyPART1vZSvk69rVQdGSQQJd1kwc1EtZ7iJg9A1qrEs88M1Yx\n958kBdymScqToiuYf1JBGczcyuA6GY8KaNTwoTNB3zBgl6AdYq9TQ03d1d0L\nAm1T8Kin3/5nQ5CgybhKr5/wpVdV1ZZzycWgggxlve4Lmhywp/rnYUI3GjV0\n8ogafkgi+aQPx6TSAg5Dn/Pi60KC4WWy019Zx9Y8Z/qIfokExDcvhMhqeWEZ\nRTSjLLuztKnuTfs84tT+QyfXXvNpbEuaXMjyNbwW2z3mHc/X8T4lZ5lsNPJ3\nz1n95N/tXM4gETmiTT7YQcYA7k4OPzVLAOze5fs7jY0HRSzwai/mDuRjudqr\nmmQwj+kYD5BP6YLU6yAnv+YhRX7GGWqXX5LE0ROv+hk+2CVnLE9niC7XQF6a\n/ZarPErnfOF4hxd05gbnH+HpxY3oRwnQ+DYKlwV53KdjtCV/DWOKjBFH328G\nNn6x\r\n=QQX3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnYD96vBX6Kpu0RzIwl4wDKJ9NZsKx7IGNn92TVa2+NwIgSbYxBUIpeusf7ptAI05aiBIavtiDw2XJLNDZRgGnBLg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.f155c058.0_1592503679066_0.2305356370527072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.309779d2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-ripple":"0.16.0-canary.309779d2.0","@material/radio":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-YDimjn90v0SeBi8UBC8IuMZ4ciiWdbmD7weQ93fezGD6L9L8IHWoNc3syagqhLMAhONcx/5ULEJMaRy+tt9/3Q==","shasum":"353e3bd4fbf45c844f853778a285f95b0d0269e0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.309779d2.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+0CRA9TVsSAnZWagAAC0IP/1hgeyz4YvEpUe5bbTHt\nwXeEU794g1E7R1ujILo4uee11vQgMdfZ1NjXGnX7HTAc337JkOMs6TrlTH9p\nJcZ8jpcrHSK8zzJ3K5C/d60F2/otBPOmNGPVH99+HAAhOKjRAbjZmKpobICk\n6FnJpHL21lsnC9PyBnyIhJdkUI0LpAVX0grgz1YvZ2zlmVQTsWg2ZjhlGNNu\nrekwOvnG6cWXQiqXpoZi/P+eCa5YOAsdU2SzdCOVIOr/zcqJYmEAWvdGHiIr\nX/NUknNoi6lCwwKGqtVSpSu50UwE9+ZQ7xEgKE7SY5rRcuAQWlDC9MqJpYcB\nswNGkCa76UjEODnzLIOD9XBZPexONkclH2RBt8dw3EgMpCiRrh+1LKyGwltr\nuv9vJrPeAZF6jIQrFy12hKpB1LQOdO/G1TRExUN4mOPQMQ3nh8v0f/ezr6OF\nZRq8LxBXSUy16cieLtmJKW+O13exHQDy+N1JMlHWQ1cr+XEr4LeBHOF/0WOd\nFpwNqps6dOsnhWXORrppet+mc6MGdKbO5rUgHWjAUxmhNF5pEovArJDRCKCs\nfVomLXt5Tq1WAGUc3Tr6OE9NxEKLj5+J3CgLH9EGHOhojt4haq4tSgGsLmnp\nYi7uE4Kl5AeDMB0JWZyGqhDEGToCdPTzA7tp51oR4AC8A/kpzrjeKd/cjT5C\nP7Dy\r\n=DHBr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDieDpft/oSicSI3nNVWrGbBBoJk7jzQjyNB+YtgfdiogIgK02QgkxIZcOM6IRYr+wxzjhHlqiO1oO/Zh5oHZtKL3o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.309779d2.0_1592524724189_0.9966768420882179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.e7649968.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-ripple":"0.16.0-canary.e7649968.0","@material/radio":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-3OTnaGoW8qeyIBjC5TxipoZQgLGwHkgr0WP633RmZgPXF9OnJNi+NxYcGNodmnM28o6yD7qbmqdgVVrW1sf+Eg==","shasum":"a40f3b1a0eb9358abafb02e481e43369d911f74e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.e7649968.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDlCRA9TVsSAnZWagAAz6UP/ic27ruT0h9HFSQBvhME\n1AFSKB6oq6u4qUPgp4oJUjzfjp2Tb8Rwc3aO8NKB5xjYpXjOOEadJn1UgQDA\nS7KtnNCXb56VpG1hTgakvKWxhbyBClh/mr17jS75DEL7VHjxyZY+tjX4JZuQ\nbf+JmbujCH9PuQ0zepDexGVvQkJqj30JIs8vunZBIDlHTJD5XXmT8ADaKNLy\nuk8aYWofRHvMxUagM35PlWb6z2J0GRst+kV5LwBfHfcwjpxCn8FT5HzRqrfy\nCmVcEDsVc7/cR8tUBDvCewwk+fWQehUd/BFV+dB5ffAR8EsdN8VMvjYo7rql\nj7jrYCiR45J9dvxiIU9xE4W0QVlwrRYKrp3959pJyG11IKw4YPKQ2yiPsV+S\nB0R/9YAf4t6mkqCORXk00y3hGyETtfYkeVW13yAfrn4JlVXZjm81opc/j/Ky\n1TFgNtYMn2VnQLdV+ykLca9iSQEdX+DrFhKuKnECN4bqsa0kmsoJBgyQJtkH\nIr8/9AZHmM2LoN1wD819SesbSOXNAVqbKUj2fetJcgkBVMzLTMA/6a9bN8HW\nVaElKMG+Bas05+sCKqapPG4x56wZnYQfNWYOQprQdWT9awgZv5SN3EZhd7d2\nKvM6eUF7/b/88O4mOEgvX4MmOXUBQNuf24Bm/w8uy+4T1kkYFvnhiSoCFFDl\nCjql\r\n=IRni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ6nkZx/LjYk3G1imU00uXwB904znz+1TyjY6eqMGUCAIgIXA9htz68miq3SzUNkgl2yQDmgEeRA0S2FeIB2D6rAI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.e7649968.0_1592602852692_0.9845732964158298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.8e21c78b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-ripple":"0.16.0-canary.8e21c78b.0","@material/radio":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QKVjsDVo7q2LCLgGM3qKZKNFNExi+nHMMrw5n7TywxNWpmKNZl1geOtzfzCmOr37ni1NtQe1bVYGwf8Oe4Fx9Q==","shasum":"a63e86a87b475dddc743d39a99d4668f29758de4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.8e21c78b.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8In/CRA9TVsSAnZWagAAFDcQAIZCD7nijsBUAmzvbkjt\nzy7bWJ0k4EkDojmyS8e6HBbDnvyYo3oCiNzk/i308Z6ZSmQnSpO0Af39OcN2\nHETVB2hr91uKvBf4WpCTvwe1RuHG/bNkupKjAlPUoYipXiVIdJWNvu1s170q\n6EfRzO3gRIfq/lad75maDAVAW18uVZYReDmX3ziygT+1AGjz5K3Yrm+cfuih\nSTg3nUbAYsxopo/OCvapCsm7dg9aF9gbjXp4S38HWYxHeR3Al8lH7dFmDw3/\n7nKnjvBHqJiZLUkW79Ly4UBXv0gAyU/1wOsoG9q1BfN2ouaTZlW4vZhSKJw8\nQYSsvNN695kYIIO1KtrsJoY5XlS6oaQfAHZNPmKF7zUnX1/Phc5tw65kY/Z1\nDzrdNA3nYrwkMc4bHzWDiO6WH6EyMLgnTwy+Fy/keBpcEfVRlL/rJkqPT3qq\nKuMea0pMdh4iUgbFXQHD4YERBAS5Jzhvv6lksDx6W5Ur2BL0uCFiD1dmaSFY\n8O6ow/2nJi5dLqyaq9EjvCbksx5O4EWnk5cZZGEg7eXUiA77Y/Nbuvc1jgx4\n1OAIcuZrsmVWwo49bMUp/KpQszoSrTi3KNURFgaShPo+8EVEA7ANV9tizZNF\nfrpru9QnWL8Z9Cwyh2SUv7Z7+40hxrzEXM5j3LEyPZ3pSRngH5HPfu3OI2k6\nbOuz\r\n=zgdz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXY/UDz3wHuoKmlgBmU5GQNj7MC2z9KHfKKN/o8E7kNAiEAyimpfQIkxkW0Cly0CoFDNqW5Yxa9Hhh7eNirssL4fU8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.8e21c78b.0_1592822270851_0.29383329910948763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.6db76faf.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-ripple":"0.16.0-canary.6db76faf.0","@material/radio":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-P8UmgXKFochw85hYhC08j3Cwk4eq/yLs0Gd7A/7mJzt2umhA/Swh8qXD+YMTFuW6Z5d67x2++M3VFsCKD2AeNg==","shasum":"1e3f0e38f8aced5e90279b7d65759cfa1e534a2e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.6db76faf.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7SCRA9TVsSAnZWagAAPSwP/iYo94Eh7xK7OdRCjinv\nDA46olLjxBd7ygJyw0REXaXjPchM17O2q9RVuaTI+4womVtvWGCNI01z06uL\ncuJsmNsF9wmyPzmRtqw+2lICh58U4Jc6UnaWCrXtVlXVC1q0jIE3pVvaQt9d\n+L14m1mqYac8nF3tf8sf5+r/wEwLWYzvUusMfy2fhV1BmkfThu5YHFdoN8DQ\nL5KVwlKU1H5u6Qc3MZKsKYJApvVyxxPPugH5tYlNy5JyzaNNwJ4XPncIf+vE\nVV3lV5ifaM/8BBBgMlhodphbfGyta/CSz22zKwDALxLxssKtALAhtynraVCM\ng3bUePOn5DbJVcEybQDTZd+DMef5/hxf5qqJ4XJs2gYG/dXpkXPmkdsfesdL\nwXP6j5v5phI70zsZ02p6CVcYQuRcdHOnvynL8cthdKW09rdNvKe8KIlUWEPL\nWtq/YOEPU8AHl5wAqvhv4CPeN4Mq2tc2GgFTKV25rZVPftrkwo0zGRCGYT9o\nzw3CuannUWejt1+rMSblfvRaL/VSK57Yjo/l2/VbnQLEvZ4ZvwSJ+PYDIX4k\njWvvmAZo0xOaqpNQW4e83xQ9LT7JZxvYi4lnV9xEgC6qA2JkZzyJn9ZDyHLb\nFkpSlaXLm2+woe4hX5f3psLo1DODBUdFVDNQwcgf8HKfFKjq+9f0GeovnVkJ\nbs7u\r\n=CB2q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPDUnn5kSyhJAcihVrIvjO9+EpFQx4s1m/YNB4iYFyBQIhAKO/OR24S9EHZZA2Tgq6TOD/jMMMb/+wBHVaNoUmML5Z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.6db76faf.0_1592860370369_0.14052252192544823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.c4dd9684.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-ripple":"0.16.0-canary.c4dd9684.0","@material/radio":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-anRk3y3gU7cS0GU1dgjxj9+Kl/PfROivNi+p2d5GIJICTPS/2wPQZsRQCJPmRCKW0P2JXD6R8AJRbSW1ZU3Vkw==","shasum":"0ccf415347c814351af97e39bbf007054be069f9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.c4dd9684.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hx+CRA9TVsSAnZWagAAQFkP/2NoMsbg//qN/yY6HZbM\n44vZnGU87yz53JnSBNslqjmWZKPv+iFg8d9nTtyeLCIppyILy82z1HxinhTP\nBT7Dl1iL/6I/GA6gM7ZIvNkzsYLWjHzcDTu+fKVdPA+yqE7Om+KT9SBGpuUw\ngz62oX8TkTSHmX7mRtBh55lC4nKj8/oSIvWZiO/MQV9wPUD2obGKP+h3Kcqb\ndbAsyRQ4rF5G4Qvwn/bRot32UIN/hPL27OrcgASxGX+C/4g5CWiJ1hAQ5vAf\nTN/pfdi4srs6bz1MVc7jchlC/9S1uA8DMRAu9DjU7/kjrNgkzdzIFTJXOdwv\nakFc1Nan1LrraAK6KDDvg2gY9DKMO8gAeAIxLB1Ywfll28PUl0kJtmgeFPH+\nc2brGQHvSDEjhvaOqMsc6nKt1BY1UNnL1tY3x/+w229XKEiHMF2K/mR00Sve\nuKscV1g0Bcuda6IqAAg8FLV+FR3tvpHdtbolVH5CF5h/Q3YA2wANMpNnoOXI\nHPLXqp17ghClqPVJNmslJuwRcU6e9vkECOAZ5fFyMHDoxl9sZYxXLl2I1qz0\nsucxaAlNnT9yr965GrE7ThuA/25whM6zbRKSOVyk0n7P2YVLwgr6Fb8nt8i4\nE33F3vVC0N+atad/uHYKlkOnd09XYzxukRghMrFu/IAieUvh23GW/Mf8Mqkm\nQlP0\r\n=CxB9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPjtnx2IT5KZy7WD7PBO4kPP9en3BbogjUejp1q6GqeAiEA6OaI0Bb6zks+osuZ9PXPRZTBg0dM93Lbmrg8g5/RSDk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.c4dd9684.0_1592925309647_0.28739595334632395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.b3e53981.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-ripple":"0.16.0-canary.b3e53981.0","@material/radio":"=8.0.0-canary.15e81fe98.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-V0L5wiR8NI/4Mgl+0lw0mYevr+TBeAszzk4CGeZ6Itllbulzoye+oi4p1+5UaFLpCYh36n3Y/rulboR8sOxSyg==","shasum":"763681588b5c97554b2581e03de7407fe45d3199","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.b3e53981.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qC2CRA9TVsSAnZWagAA3fcQAKOVVcqbKiCnXeV4X3kY\nLt/Lz1HkvbzmAEDX/MjtbZ/tBbxIW4b4o2VduF9/IegeEZl5+78JfGAvJGJL\n1j3bBRk3FYT5tS15xzyEiUm5nVTr6vOnEEfCpzPsVLhMaJYLjn6VX/Grcrtx\nPWJ+bUIaRJH0bahhpIMRCJTjleofC6yxOSO815d3BJ9GSZh6Of4rFI8AC7b8\nxrgGgktpHgE5OfcqaXclBVbLdPDYlqeg1xM6mBGfVS0myEUVdrxuZc+FKaGd\n+xMaeIwiz2RYpsR5UaejUeTDnNRVyJtDA1dW3HEU2MvTmCso0sOucAhoDJB9\nyuOd+u/PHGN7ZdOP33noe2+eo8B+Tbtvrk4h1aLxtFkPovWkfKgvhvemwA6K\nSMby+x/iAx43dJ0wMdu9XAVrA/GS1jmv6Ssm4X8AxDTl8+pOOaDhhiM4lHGC\ngG31mzWM8Vli+109fNZ3RrCfIEY0h4hirmHBhAKXdxM8Pd9d12sxpHyx0o5S\nRwQZVwKbBHNLrIPgGvz7ymXCiddAkBe9aZkQ3nITmvkRElX2rpix7dWl4aoM\nY9dNbw7cM+Out4uDrnxl5vqTWZAK0bm20M4Tmt2+aLz7ohHx6ReN1mGUo3Gi\n3h8wj+To0ZGCcB96EDDT71Z8w7pLMjKoSnPykEF++r3v6UoIUkTBqBSoEcUQ\n8Wkn\r\n=suBn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaxoTHaDPQPe18MF4ibUDuCAygtpkb7LivKok0VOFTIAiEA2H9UEJuEV4xuema3EKPiOgTciOZoLG1es7sWhXznAm4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.b3e53981.0_1592959158011_0.22476654273420893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.b9468f77.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-ripple":"0.16.0-canary.b9468f77.0","@material/radio":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KEUqHb4+2IGhUfDm0iBKgXVN6fK9+xTkq/DhczB7Bgu5VEQnTixOxSJkE/Sncr84E+mDiyoXr3HQ9uE+E4QCWw==","shasum":"3c46c9585d1b1dc5b93085db385d1c858a91f6f9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.b9468f77.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uXCRA9TVsSAnZWagAA6b8P/2eeCF5Gqi7bCiLbD51r\njkAKih4BWV73kHrIMEFPpr7uNyAY9V6ZIxfgAYG8UpXAtePKztsc58g1laBv\nsC9FSjNrWREwzkYmZ9HgPpoHQykVrkvgf0aNvr5whQpVSaZlG1IZginVtl0X\nfzbnB2p1fhzz8gFa5bWzhNq8HDPFb9wCiPt1Q7+dRFYGHIi6urvxuHhhE4/5\nXVuUD/gYnqDvRJ+JzXF27Usft0OZiOl2+yjIEHi+Z4asjTpBHO0bRk9rBSZ8\n+ovKSPkbxShyk8cjWncKmIsWLhlD1+3STLipVRZqH2xIfANBNgQQO1GYLkBN\n86Akysqv/VDd7/Fnov+5GgeIOkla/XlAdZnLf9NpP4n/dDXlKvoz4UYtkgjJ\nmx2CTZdONJjR3Lh0nq8albuaNxUMCjG5liyK0orVUt/q1G56BzopaLrr52Pg\n9mFFojNmnkiUdyj71LSffh0iC/wTjvY2hui0aieHJWJTqxMZBVQpesatLhiJ\nbg6aqwOkw46cbm0DZ9aiElyR5XQifncFzv5IQ/lIYHPvTc7Dps+RX7XGjj/K\n0/HwMKpL2SnBSAHqW57J6iaMOpK/sjm+k4oAVcdONxBlW9GdY/EKceFMZ6t5\n+2GFNC3iuR3i0tsdawwzyFO069kSccpZL7liUxAxp0/xEKkrx3eOPqcS2Q0i\nZ8Iy\r\n=yD0O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFH4/bKUEXVkH3widO8Y2ixRcyCXnx+uIZzBOyy9Q2yqAiEA1YKoE3s69RrwxQRFmC8XD8EIYXLn+uJLuH0tRvrMWbM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.b9468f77.0_1593035671115_0.012631673231371376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.eb790e49.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-ripple":"0.16.0-canary.eb790e49.0","@material/radio":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dTO4LzjGcknblBmsidChXpYHoOKm5Ii0WrNw/qkIaD+Cnv8xQ3+lMOuuqdPXFTeOLQVVia2JH0ObIll7TKtdwA==","shasum":"ee9b4c14085f6bb2a4fba8111bbe6f7fda900894","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.eb790e49.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTGCRA9TVsSAnZWagAAl/EQAJb5aDdBHA2OmRBLcyTI\nIb0EQRv0LdNNMcr1soFSUzqxpua4zd9R7wRZHzBYuJvCWc9lOVs6bmrvYUwY\nUMHPPxQkJH6xmdwKeJFdQ5q+6Nptka6nVAAM1gBkk6EaL3HLuWGrcjaVk2CG\nMIXP0dM2Re5+z9wFdjDNiFWNPJqQ02PJ75YZvYGj6I1hxkT9rmrmYsOywwzb\nGwdtWC9lgmB6m99SPA83y/cXad8inBmjV2XGLi4dAV0T44n+blTPcx06cA4b\nvUVQMobULqZRSuqyNff8vbw6BVNJ6AR4G3jLI24mGgMY6cn3Ka3CVLC2Qhhy\nYAFVfJN9Tts5r+wdbBXzIvOCtU3mbbp+0Uy4jjg9bWBa4XeP+G14FQgNKLqF\nSHgvDwWBGIIZYKEa8AwnQlhLgC9bOl5Ege+++9XNXY4Tc3zYx1cwWZbJTrZv\nKdSgYrFY5riglPPMJyiwhSNp9po8F5g7jFk8DX+Eewbuu8W2099CtTp9FkT4\ne0cUHD3C9CFB+/V+NLo711TEZJnkjzV/kel3Rgu1KUJ4oHWEpJXsL0iypaK0\nj3S8sfPPEYT4u3U3PAIf1/969KcZHqj+62EkVFN4NpoV6BrlYIXhDcZ1XJ2s\nCOvcLAMLuMxvJ1pFllmaKSPMMpK/WbGUFuhVpvqDJ7MCl66Jt1OsY+ioy51x\nc+bs\r\n=C2Ok\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtOs0fmfg+x5jWg8viID1f+Tz0sMBlnIHDZVzwb0N8MwIgbQPXyEW8/4qmBjajyCZ8p/krcOsaCVULjnO1yCFCySw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.eb790e49.0_1593119941808_0.7122246819620071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-ripple":"0.16.0-canary.9aa1a5c5.0","@material/radio":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-E7POJrdiluWxCYxR/hXRmBscE0rq4YfNHNni/7/xqmZeTtUy2q7MO5Wa6YNdlez4c/1e7HebcJs7eiORpJcC3Q==","shasum":"7f450d6b047682e86374c865250ca81d1ae6e1ae","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irRCRA9TVsSAnZWagAAq90P/iU0YZfv36hnE74U3xtk\n93rKnkX9aViEH2HRi/QP3ejbfRl6kKo8wHkI2Q4lAPkNkVX5YlbgGIWdm0Jl\nlbH6uTAT3FhomnVQZ3BNzvi9Yn1z6/QOwqpGuxzWdjOmo5ZFNVMCS4q9aigE\nakJXkhDoGkbKpsIwtB+I7oxKTbILWcjqmg8ZlftaMtf8qxHJtoSJ7MFllUOe\nvWPP6mjTB7YZ0uSyYGFPy5QhQTIjkayxfGd5vHkWyPiAkn71Ev93e67W93h9\nkRNjj229iUJqvZlBkHVjxYZmQ/z+NBhHD/Hu/hb7q++4wfMns49x4ZSOal1l\nFCNxIAzLVBIpEdlW235aHlmYe3FF2fUNubFbL9SyBMk3ibJoTBq6BBR328Lw\n94EMeBi8INkmAWwNSVv869efVrCR9QBuPR+iFAxFE1qFUFOsg11lp8mfXdah\n+nm1/it/iqyeryOcMZPSaBJHH4K5EU25KF2LNexfRCOFflA6BJaERJNEVz4M\nBFIvuVqwF1EfvcJo6/rDw4iAEF3/yaqydamzvfRs8brOxvtHppP6h6hDqw53\nZITzOsV82XmoYkGJZ0L6UCqh4G+zm9r/6B9nYZPsOrX415VJY0sNZa4Hp3fX\nhxvnGqJpoVyCFBANIi0qDFF93hXMOoJ6YtQkduhrEtoCJie+GPryj5qi3Puh\nnJJP\r\n=uKPN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYf1LPmbL52Zpf49SCP0SLghaArOZ7tOLgRE1eImwwsAiAF7oPHLIawpeBUAMzxnWNik6nOJfFFcwCXKvIM0YUoDg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.9aa1a5c5.0_1593191121490_0.8486180789455375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.d36e9861.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-ripple":"0.16.0-canary.d36e9861.0","@material/radio":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JBRmWJDnZgW831pUuaQBjBmZ9CyQFND+GlNzzLy/+BZFL4I5DT6v1UxRDP8897xSlR4KmNhJwfoFaUENClspmg==","shasum":"f5072fd8d00488d8a7cb3a2773b9734e28f4faa8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.d36e9861.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIdCRA9TVsSAnZWagAAW64P/1EE0RcSoOOV00+uHEKd\nNZa2nvadFKUHy02T9yorh6/vOw5wkvvyci+4w2/MfpgjDmthDBQ/II7Klnhz\nsHTxzzoKc4GSm0eQYXkXpKJI6xEWB24jKpzlsI08X7/zMjSKC94MduEoABfH\ncarYOonWbftJmpwNCIdP50bfBXG0+ybTZFlQ8c+Jp4CJ3aduMKi/rjbFUYI7\nhUcAYcCD8I1C+LiEVCFz+L0rKbTLQ7m0M1SkxbLWn8WtgnUiRjZsLSG+hmlS\n/rZ8dVQymUEwTBYwv6Hm0RcYeP2q/Q5IUWvbWs03UVr1oKXlIBGinAQa3xZ+\naeEh0vZ0QadZX0ZiXBMg8seaxEFqE6YA4hv+mfKKEU5K7GWHodTuPBFiHQjM\n7vPPBnGLoGpkZza36q20ynyjDJadtKGDwFF+2cebqm5zdxnVLtQnxFuFxjMo\n/N6NdpWzNbzInhyHMrp5ZjQHufhzGsrWaAYNk2Z2lElR7vP7t9Zn9ymoht4j\nc4D5RTuKd9Med1RyD7I/EfFkHzoSnvSzPZswzZqCvORW4CrWi3jZ4kHg6GuR\nRZcvaGCtSoC1ngITiGIpxyPOrQNC8Q3fii8LZUv45C8tpud2NzEkBWH/6CKi\nXOHeQk2giydVdDZ4DyDHdE1D81GEf7s9wiAABli+DqaW4ICaZMZJe3LwIgZV\nfLCG\r\n=yU24\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDIOB3X/GdGf4DximH5rf97wCtnO0ZVgaMp0WHYMDbv/AiAa4LMsRP2F5W/mBtCs4MvS1fUJG18hbd8i4oj45VwGMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.16.0-canary.d36e9861.0_1593192988668_0.4668973652577859"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.155c2f85.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-ripple":"0.16.0-canary.155c2f85.0","@material/radio":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xjVWKDBTu9RSFCT+z/wKpxGvfvnza72sHtKaUMhVeYGbgruVsn7NW1C4g4/KHZ9p2yg/yWoRrVp4GbCSL244/w==","shasum":"1bd24ed832c9485d8484572633f3a899ebd43ec8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.155c2f85.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oT8CRA9TVsSAnZWagAAv1gQAIHPhjUMtlPw5k/EwPRH\nWSJ+hyXPcIjTo8XDKOtgia6luNFhZOC0qA9je+y6xPTn4kSWW28NO1HY9adi\n+P2MIZVCWFHaZQyNdK+DNtwdJrf80/3oe+a6yObVYFH40bVpYn1+lAI80EHv\nn8SLNMep/QwmtlFFRARuLN8a9kZSE+bepACoIT7Tgpqpbyr3CDv5rsX5EA9y\nB53S5Ppal+tXcM0QWm6Chw1aqclPRd34CPDM8ZywjAeMzEIfxGzLnVrC9iC2\nxAi/BFMqDtSQTOPjE04BowA6cuKMpdD8H3mMh+J1C+LokdCme2bU9ZobKLQQ\nXKQJCRuMws9dhZ4/8kHDVxaiSKq/VKhQFXqHJzBkmh6npZse3Hp1eA3ND27Q\nvDE0DPy/4QswQ7snwd1XP5A/mWcSAbGFKybsGhYN6QEil3m05CA51biyBzh6\nTHkj9BqDRsa5vpm1c5XIfaS5X713GkJVIGJXCGD5+mXChSnL/diBDVDRp3T4\nDImQ89wY+vYrM90MU3gvl9i/FbIZul2SnWllsJk7NgHSEO6Nj1z9bZBtdZVS\nkTagLAiwbaRnrhkLfYsGfv2GfJSgzl0Vf2WkUJOM4yWWppibCDWayYHgbN2q\nj/UHSWgPAGDNLcTTuiAiSl+s20EYYP732GWv47JTHzMcu2Dt+nptd+XP0evH\n7sOm\r\n=tNqE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBRxXfIxICv3PFC6xoc487PTf+vWcSKhj363lIjw/KxgIhANbzOQFp6E91Av8sdtAnMuzo391GL5XM0mbTuuwln+NZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.16.0-canary.155c2f85.0_1593214204436_0.43848008900234614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.340c9c40.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-ripple":"0.16.0-canary.340c9c40.0","@material/radio":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Qn2dGoPqxlKUrcWw+2Mxz5N2LyprAb5zStx87yEi8JS6c/ecPvkqUycdALtM7RQxxPLLp4eB0VWdANcCTaUQXw==","shasum":"95e36d2ba745032ae69cb8ef943b7ff14af6a184","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.340c9c40.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obwCRA9TVsSAnZWagAAtn8P/ifnDhMx7+iAC0Sh2gnk\n8y4iUhdBpKwQzsRhXIm5LPriPAOeKfzbgLIZ/r5h17rF7xZ7s72PhVwaHUiX\npUosW6YsrdJ46J5OVPJJa4xlmXwmU+DBcBK4iAH/JEAloEOHU9DdUOaHG2KS\ndSU49wIp9HlJCv4/zS8O+L70BzkPHtx9Cr8bM1Xc6j4hVyjdjvhFv3BxeIew\n56g4077BEtge04JB4VeA2L8BPLQmwxOG4Sqc6vahEU5BylRFRcphPCkRAd+p\nFhFtX0ebCmXVcTwAhi9LedouuBculevZBntPLsaFQMKHVhDeAITFQRfaXUiZ\n/lj4Km+cMcPVvt6okyG1TLPLawvQ5iRWzcxstP/EULLQ4HMAEkAieydaJ7Y8\nD6h0d+OQv9uj4MoJ0SYwhPJN5A7iHeQWDR+F+4Tr/RTA5n0m3HU2iuSFOAvg\nTOAYQIpxuCX4yU/3VMsjnplN94+kvPjtjVzjE3Irb69fObiWs+RqqGTyf0EF\nbNeJz2QbQ3dXZY3rJvyN7UFQ7sUP4Jz50PGkoW1qLse9yub+NBj7VfrBN46F\n/YjtG/4Qd3MnkVnDJTmLiwrDzhgvR4qxBmJbm7t/g0b05MlMADBtZ2CyNW4s\nktf0CohjkYPHbLblyqWI4gkUa8CpC6CWNwf6f1bxWwpwCCJLiyG7grKMEhTf\nNokz\r\n=fbn8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSTzxiMKaVk4ubKFWrIZKrJTyKlUwv4g7QfJpV+6y5TQIhALsRrYZBbS8m4+HPcFYQxnMHeF3PaOYYhqD8bcHF25rt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.16.0-canary.340c9c40.0_1593214703785_0.43472385571238426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-radio","version":"0.16.0-canary.a3384d2d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-ripple":"0.16.0-canary.a3384d2d.0","@material/radio":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IwhIiTVkY6a3wnTb1XeRlRSeFsLNZXoyawFnl/X/mYZvzf7FGeq38hNyWeNJnC2SvIZl+6AVHP3y3pkkDJUrtQ==","shasum":"0a0408433bf19e5276a14375d3efd4237455f761","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.0-canary.a3384d2d.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6fxCRA9TVsSAnZWagAAqeAP/3Rg1zMHGYbaDB3jOf+Y\niyyfhORJNiXouOylRAzf8MH++5Na2Nq4Gmk2OMu930LktzN4rzY5w01EyyNH\nOzDL+E4MyIA4L5XUcVBzmsNW94LmG3NWLfQES8Bx1281xDMgrGr8Ji+aKo/k\n7s3LVGLLfcfpxCwFmMlh5mU0kKXIvYnGfflmpeZVGWzRDURuwBzlTVwrcsMV\nqXTnccl9Q67IMyTWVjf8MPh4sZM0zuSj6g1N5ewBzv9OKDmGaPVTOPyPgW/3\nDWk7VwGA2UWudT17Jy+W1ZwEdKxK8jXdMWUzhLChP7zFmdmZs3sKu9dBHtH0\na/uIw4xZ/8Y8Sf5EEQxMSfF8eNmj6arw8MaPbxoC7hpBDXK8iZeNzROvLNEa\n1NFIJZjd0gykkAu91BfF7ypiMIgvG+sKEJC4P8j+U3SqNfFUZ7kUy7XPvKC2\nQXooXH7lgVnj9Yelp99IaPkOcXyvY3U8uYixczLuerouXvaSE/YOB4/kY0Lo\n8YpeJo5iziWeBirQohDcJLndp4l5R9HNL6nDvqd1fHHoKBi5VnzplsRk+zp2\n8D0RIOuzWNeTatSRxGjHT37pdUsBG/1iuvMeTbkZufg2GNqQR9foY4I4xTmd\ntRS4KYyIp2SWyVjoGHKn99GDX1xcV+ju13B2IudR8ys/otHydfNgocevs82W\nywa0\r\n=MPHb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2SIBE1+VUJv2v8Doue5ZqOPo1YpPODwVFQR8Vm5KM6AiA3uIjOUZ7B0aVtVL7KaVZHjg9Z+yAT4YmUONkiXyTjxg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.16.0-canary.a3384d2d.0_1593550833153_0.5184242096097371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-radio","version":"0.17.0-canary.6d056c96.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-ripple":"0.17.0-canary.6d056c96.0","@material/radio":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZADt2ruAlPGVjxsv1rXykazvb+Fvws3sXirhfDxAyTkS2T9vPs+dfE1HHpjfcApow3egwsN9YYc3YtTPXZ8gYg==","shasum":"d43d87469478650681b15a2842dc34c0c6880f3a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.17.0-canary.6d056c96.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6ojCRA9TVsSAnZWagAAraIP+QDYTlGQRMj+mgV4yuNY\nll/Yhu8Xh48O6XODQ0Oa+O+C32b1CVbmSiII8tMaCakDwrgrLB/va3pnvnCO\nIEy+uHuCtbu4wq6VEuz2ZX+k8RrDmOZ0jjYXAEX0aWpJ2UsePTHmudHy/yGh\ndyTyG9mMDfCIgB/JVLFSdKM4sW/HxKFUa0vDpY1QjLHRWN4J/Fh+TIApqdgG\nD0nVJdS2mzDDHlBC8kPP20PDoy6eG2xDUv911hg2DbbTwksFMDFm8nc7Lufq\new6G++sstl5v5OB7nmAk3cl1pPJgwZT9iN4yQ6SEuS4m7P2oHsvaSVct8oKT\nQFAC0Hsq00xaScnGwbRxKYhg71dYpJ3zUxvf0W4ceLjkv5m/YtY7yE5kSLtG\nQDsI2gSjbZU/Ma5c2uE15hEX6w73Ikc1IpKshhbZ5EJ4XEKgN6j6IH8XUqLg\n6M4rvxCtX4831qtAbBr1dmNIzkrYW2ohAO1SWVSlwZsRpkq2e93S5rr7QN3k\nz8qwiqZqas1E2tx5FmQBoSIPvviLZkuUm+vWOzuePyRHWtwNwJAlO5rPa5W+\ngyUxKxk6OW0w+i7Fz4B5Gtgin//FKaAcburBBlQeYNBjfU5YaToncFkjZ77p\nsYVeHs8/aJIP8IWalGk0YcZBBZdbf5je1vwsjrbCBLedDE10I4ZYsDW+TFzf\nwOdB\r\n=50RK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC02TfwbG6SIe74Yl5BK/jpcvRcENpwCfc+vYeL+u3TfgIhAMf2dmAnv4nsK7fypm6CD9PxXkT7xF6vKr/8fKEME/96"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.17.0-canary.6d056c96.0_1593551395278_0.5961269490496799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-radio","version":"0.16.1","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.16.1","@material/mwc-ripple":"^0.16.1","@material/radio":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=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-radio@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-CwbyllmjVLvryzPdu0WFXKjmTg/k8Valpovw3UNOifx/6Di3WcVHxTToND20L9j29T3NPDVQLb+Ft0n8yjbJHg==","shasum":"bfa64c96f45fa688d80774a0b79843d906b6992b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.16.1.tgz","fileCount":20,"unpackedSize":114818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tOCRA9TVsSAnZWagAAgKkP/0bIAE38IJ1B3d0ecRim\n9X3tEDBoi1BL2jL4D4qaY2mJ2jj8iNyshsJt0AOv3G5OpKNTZho/khsv23p7\ne1m0ssrDsxMcpymKM5/aOVmDUwjnwtBA6IqbVuUaK7XKg42dXF9s9fPLZ3ss\njVEoa50Sjaz/cQ3VBEFG1+/LjzGBC5oamlyjOoiB0EsJadgm2y5Kn+cieBEC\nul7huHTf9a07ZwU9RdOP8bzdxSCsmJFrUnzUo9cSuP44aYmj3dvNQO3wJ8cx\n9eojRc6Kzv7mrgkgXz+tDHvpQfmJ8Ya7/pGCJVEjsKr3xY4QStn9Dj1Keayk\nhMsRwdxVRQRAXcjHXIwu5KczynPywDgkpR3FbqHqhq6T1jwWn0VF6q4+OdAY\nxSsIGFQ6+hpOjkaNtc14ueq81X33Q1eU2mYL7GxtS5wjF9P+R7hTfx8gwon+\nx+rnx7RIcxxeG/AA5oMrWnhWuKu4o+xyyJR09YKjVDl/H9Q3UTm1Y0lbYmFS\nVs3kADuFBzctJl96lZjaxKJ7lNMaFyGpxzq0XHNvZHf6GAamJEzcFmFF0wwj\n/E1NHMCDTrAP+QNRKwg611Mo484dsTsu1xh9aqEY2kZmEwcXjQBifUGxPTFI\nYNeBfDYWpR7CeVyxe35yovSta60OVcriug1upLHCj5YqKSRU0FOU7VU9wKdq\nQqhN\r\n=crk7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEa4t9J67CLlN99gEUfVLVc39G0boz8v/NBvBCrYe9NwIgQz3c8Rr9/7QxZP41bHJ4koBz42Tn0Bo2VF+iNWa/WRE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.16.1_1593551694385_0.381732979727327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-radio","version":"0.17.0-canary.f7e37607.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-ripple":"0.17.0-canary.f7e37607.0","@material/radio":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-angTVc3K6Z2+fl55s9rydvAkmjSOLYPKuxGF7K9rrk86WFuKi138HqxjwkIsGrlhz5YAk7Hn8qV9w43pAOnmtw==","shasum":"04b9882e498f4b9acff3d3f338e22e3e70167c9e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.17.0-canary.f7e37607.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IvCRA9TVsSAnZWagAAKRYP/j+X4j3GvzSwglHANb6O\nj+XAfAbRwC3Gr3gLXLANsoLsskOlyGfEjJbWWBySojPin9Rq2R8TXSFHympb\nTvseRjAu0U67kmidK0IHJxmWV4twv+XGv1/tnS0DLWIi6TLuUvky1oyzCHZd\n9lABblj5U7wGV9hfpMmF0kgjcUxgYWgVxDYJq6JJNKZ0aNA/QqCYqdQpU4gO\nBvl9jmx/GUzfKHAhelEmE8aZuOThFAEJtrLHkzknvLhT/tX9lQaUu0hCM2Jx\npS4bIdNi+WEAF+R8BGIvHqUdcfAF4xuvz9FrWSkfZpIVsd+0iR3RWR/QtbXd\nbW/znLb8pxRSk1SlQZA4wu9FYUprv0am6UBacHq/H7ZajoKrxChQp0aMGdWy\nSVmdTz3QsIm1mRhMM3f1uu0GnJkwrWW89URNbFpfNw2yUR8xHcZWhl3D8OOf\n5hLZT+WQH6Ecpa/RGkZroq0tr7C4AKbH43SkKiN4pilkqNZ22/yrochCCqu9\nIUY5KUtlIpN/KeoI0EATHtYfrVMkvfyiqoIyeOU6mzfv1DHc+WWvkQ6SSK6b\nBqQAHgaxf93wTKbQ32aV/hqgyKcHahzHzlTE6nj41UbkoiNeHqWVpy9/x1F/\nTApQPt4BgOD0XCkIQqTKQNRkl/JbZihcbAY77u4N1/IJUUFYA1rRAUAG8dTB\nwwCV\r\n=qw+E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4izfVkzOFyIf/5l1Ji0pueIN3xzaTwutPv3OMvErsiAIgUGGs3skUtw6tO41k0LkLPMDiR/B91JY9hdO1WwZSx2w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.17.0-canary.f7e37607.0_1593553454941_0.8896240079691358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-radio","version":"0.17.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.0","@material/mwc-ripple":"^0.17.0","@material/radio":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=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-radio@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-/bKuRlN6nzSqR0Ne5CfJRNivzUrGnUJ2ZWUVJe93dPQEExUG/NOicMHdlb2WqKkPuIQyUJPwpnmWw5YpQKS7Xw==","shasum":"e6ee38d90b2d639211efa0ca7813d85e2e44a9fb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.17.0.tgz","fileCount":20,"unpackedSize":114818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeXCRA9TVsSAnZWagAAvbUP/im2mojcxtwR2whs0LAk\nVlWIXSs3XJc25KNq6lWjkH5NFVzgxinNnYMiHGvcGMxR0wpAIuWjRDp/tQf9\nCmbDL7Ice/HTdmKnsRL3oW5+vsbNoVVshz/y+Dpq5MQ1QC5mPc4/6efoFuuT\njbMTF9jN2uMlPrKXWILGCOnFymtLnpMZg/ip+L1EzImW95Up0yPHBpDEOLR0\nBYh8dHaaPcmej+XZWgfLXz05EFmfb3EvHHeLu4ArIqfICYRPSktOdsKKFVhz\n66d5Fma8fRfI2w57MgARPhFCrCNvGTfSnE02urOFwAcG8mFNAtTJSgcZ8mcw\nESfGO0X86zBrKx4mZohJMT/Q+92g4HZbzaAfctWdzJ4KaHiiI7+bOcRhx2wP\n/n9X7eaxsHoakXuwDCk9zGNU1EyYd2UznjwBGW0zNlP2p+8TWOoaivkY6VWy\n2YWzRH+1MRZhXUz5xuXnBEFQTfv95vEs+TgzxGL3ohn2+HN9ekxuUHLgK5oq\nib2gj9aj7yISzIoIaITJavsaGeM5GEckxIcBxN8dNBVbdlBlz5wDP8hy31Yz\n17V2uQ/RflKXA1rn4jN6VZ09FyjcadN1pPEfIBdwBfUJr1HPxPRXVHphW7IT\n93xcZlXZ7Naozfncs+F1KAS8N8wMyRSePrsRligObHOFDvzAY/86AOv5kvsy\nElEn\r\n=574e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPQdu8SrfM2w2HeVhZtieUUOSAyJYhmx5NimW2riW16AiEAhv0y1iR4M43vkov5HDvmFD5rWLxnAGU72RRJHDc2z/A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.17.0_1593632662947_0.8997981452689494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.0afbfef2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-ripple":"0.18.0-canary.0afbfef2.0","@material/radio":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QkqppnqCryL/Jo3quaij0LhAPzN4FHeWdMhWR0Yh3YxKULopzP30tkfxnvbt1s5iaVmAPGPHZewbde4gvnaAZw==","shasum":"e8b5fd7c58ce81ff800cc4d01fd19ec039fd266b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.0afbfef2.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OehCRA9TVsSAnZWagAAkCsQAJTEjUWlyIzsnuI9d/ht\ncM46wshhgQ3RmZqtIe1WGO4Y2FlzkdfXPyaECSU/ArDaIngv3ofqrX5RvHhm\n76ceJJ7NTbU/Fv69S09xZ9Rh/yMkvNTc0X8rSdhtnvgZISgNgaRb0/0NHIRu\nkTUP7OzJHmgTkTZdtFiM+Kvv1RmI9RCpPeh9TaAGz87dLSqM3HWxjunF6bTD\n849KTfmtZ/aLb9sP+FWdyk91mgwt8sJ95GJyTFSJpXS37OwEoT/EPVgvNebW\nBpOLjkKcfL+6YRi23B4ZzfgqS+Dqco+gkoUEht7lxTDhrW1FuhXdtukF8Ldi\n4ywaIg550l2T5JeKeF7yBjbYw/gUHcTphavoKuDbSh85SndxR1VzkprJY5BL\nsKOPVtJjJR5TADZjlArBCV9/b9DrVpptZz2y0j2ZR8lXGMSWM37WEIkWUkNC\nWkEaOOwF56yMNNCj3sqqljhfz+y9PybOdhhz+D9SduzDIgLX6Qfi869Al+me\n3bXZxgfvMMepjDzjapbPIk7k8QTzKBESDUCsJ6eyxFBy87meFCzNi0FDqo2h\ng351AbVWl6gvlPWxRaoE4vA3QFXqKLdwDalZwnLU2nmibjY+p/6RFBHk7Ntf\ndvRRDVk5dE8DHIoYaHFqpcwImQwVbuK7+HJCDImifO764ZBYDG1kVPsXW+bi\nqv5c\r\n=0fIj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjcz87TWy+iwr525c5qQzAUaDxjkTWLeVdBXMhF5tJpQIhAK1fRSxzEU+Lu2X3D5PdkjehUVrXMqxYMREdXPBRQd2e"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.0afbfef2.0_1593632673606_0.9965887809842742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.fd970958.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-ripple":"0.18.0-canary.fd970958.0","@material/radio":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-d01OG8KtfOCGXV++qInormAGQOZJilp9DvjbxlBIf9xFT00Nvt0unvzUnoVn1mhfXv/kTeh0vUd6guVK5ZqdgQ==","shasum":"329ea56bd4a00353f6ff0e6b7f7c23381c9faa9b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.fd970958.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1PCRA9TVsSAnZWagAA3uMQAImwh6NjbQidNYBJ01/n\nNQAjY/HlrQirPp60ltQqzQBQgJYweqazeDhV7sVNM5ci5QIBmDlWnLr1DG1N\nQuet9bTRSkofDNdvV2De4aktc2VSItw0ABLh6sostamnjku6h9eXOIKFVHmD\nmU9ZSJNSKhr2Bm73KKIGrzbkB0k6hF12vWFwq9T8xXawOEmjOKG8oNSeswAC\noOgUKQwNcQqlsZMyFd/WH4e9lEpwhTg5R6FylxGMiMF6yJq5jg6fOqJQVPSl\nb66bhOeFHW9xX94NgaeyLK5QlZKhaQEG32FAZHfs8HaC8dBhFgPBnEu8atDt\nHfOSK43xxqlUCSw9xgjNvTqq5G+t76h+GhoR3aFArqlDXNwPS6FidJfDudH8\nQaIFBVbxK7mFNH7h8aX9knuEp8Y8Wr+y3nntCwtb/OiujrbxKUHnZe1wCFQA\nUstBx5shP3nexZS0ZNMcSdG4zd9MlHqAS4aJRDWYUF/inubPXWfhAqk4ggoe\n/2D6gJ5/BAmc31VydOXL/oudW5qPZ7DyuFUVFN4Wqf9FeqVg/tMLHe0C277p\nhLuo08BTwhNi2Dxkjw0MFPs45o3Jn+t8kcWfJYcWP03rK6BOlZ1jG2gb9Mu2\ncvy/RKtxL+c4a2rtBGZxs5SXj1R4LAXtyqIKfuup1CzltZ1QLClArfSaJMfm\n5pCT\r\n=QZkz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBO+jYz+K2pGEP6DSm/CpSl7JZMt4JiVsmCPpJAy1oQVAiBTVJftaol3W36fKHdgLH1IWK70Q28V5ymsqx0bp5UKEw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.fd970958.0_1593646415144_0.512390747970437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.fd44be19.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-ripple":"0.18.0-canary.fd44be19.0","@material/radio":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ma5FbD7cpYSftYwXoj4JXDiVO5SQ4Y7QW6WPUzPp6HSNHrAKY4Y7OtelgLN53/vB6JCfYUuB3BGb02/9fPM2tw==","shasum":"d00a1a4f3dad8b61d96dc3ea69cb16c8c839bba2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.fd44be19.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XU4CRA9TVsSAnZWagAAgDMP/2ydNzpqcq8Tf2WAgyBw\ntRD1TILKFOgVcON5shzNKDE5juZGE19kQV2TRELmpfd1StfSaPeCYoOXn34A\nxL0vy7/IOKegK5bWUwiXmN4aViisCT3EQ4I1tYKJh4ZEo+16NpCqyCJ3L8Ir\nquSYbKlIWh3ZLrBiN3vUGW7GhQLkWswHO31+jTnL8TeqSOCEQTXdV0YRUShX\nBoL/+I44Ggx002WaLtdXz+MCIZd/wQDuK4mfWwlWFg61FvEt0xJLi9kJXk8f\nHjdOuwESPy653mfW4CE5ftylIZNpQCXatJFBL66TbJu7yh4O8geKrRNu2HWx\n8Zq8ASZz2LJbPa0Oy/pbbU8MHDldy/Jrd4DPOSMUP0EvqffJv5aVJtYQnBs6\nO0v0LdYWOeWTR/q3r7ao+kCZJ8g4ZccGPrt9LUvXD+09D2W3gUw8DSMWdGg1\nRo+pyr1+MekzW6TYe2uXFTR+w1MwB8EcMyxpbSVVGUdqFqMj4asAR32HmY30\n34mUrEraG93RmBVpKTISwsjPXN8BivUdz+yGWxzp+4c+HAOA9IrS31auIzeQ\nUKYubRDlIr/j/8MsjmSP/+NQbrzaf7rHQRqBB89ZYsgIfJAFYNrglbbVlcZE\n169nGAe2jHoh9Nc9ueI3SzIrMowYOLKVEtUZIOygF+JTMUj74Ih5y+Cx57tV\n+kmL\r\n=BGaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCznzRutdVwmuXnrlOHdOt766e+xTJrk61wTrNnwQpdmAIhAKj++r6rs6KbGpY0m4Wu5oyVYPAUOZUAFkDwUqZ24Kah"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.fd44be19.0_1593668919976_0.5960664630645736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-radio","version":"0.17.2","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.2","@material/mwc-ripple":"^0.17.2","@material/radio":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=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-radio@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-+aPdJBUWTfT4pQg7s7g4wDvTvNE9gdBywJICtgaRM5z8NjYoWnF3aZGwb49yz+TAbf6d3ZYwRWPnXYx4sfh/gg==","shasum":"101c41eedcd947f6159f2b3cbdd52d1a6b4bb277","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.17.2.tgz","fileCount":20,"unpackedSize":114818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xd7CRA9TVsSAnZWagAAwPUP/REI/vJgSrjVCaaXoNNL\n4WmMHEHgrx14lrKMWt339oDCUmwoMTa2p+Kjq5gpApLsa3ITibxa0ijJKw0W\nvSc2PW7H8DYywhzx+NBM29AeL0wSwYCXDg6DVCPxXEME7sT5phwX7iDwJ7sD\nCWnhEYUUGcqL7Fnj81qLtc158CUU/h+l5bVtblK6PD1JSHnRjear2V2BARz6\nPKWN8aob6cYBT8C0cqcDD22XWjc15vzWQwFFiI13/GG7uMgq5IIpmsHxwzjZ\nhip59yq0NCOQFI0PX5Tf5xwnFX7aM/tfV2fsqzbln1eblTjOvcJ9Bs0n1A3+\nMDEtzR5hfqtQlNyDyT12D2geaK1NsrcXTJ37ldYUluD7yMrda57izFCCMVfK\nN/vhQ7ppGGZpOdrKN05BA/wpPyYAAcwS5FN9/0Z6XTb7/h/WVg76OEKVvDEu\not1CSCGVRpjKTBxpr1m0nzDDjcwc2JM0k4tStpe1TKclDNXiJblSrHPHZX+a\n78BYESAOsI3qw/pMSpT78tFT3vNG4OKOomVDlQX9pHTedsNShjJbFHu7PLAV\nNnaritS/6KqBJYoZRAwBvv671fiwZgk38XUb/M70RYeO44Phwh3z2Ys/s4pN\nLc/5DskCrtKOVk+VUYJ5VOEyrfhXwADgv2QN7cmi136bF5giPlT2oreJLdR/\nxj4d\r\n=ZcED\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxV20OyKh+jp2oaoD3iEoQrOXFa2lfrfKdHLsMzhBlAAiAURU6xG9O6YPqw8uSswPEZsTvK+PIN5QgsLAj28ck7Kw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.17.2_1593669499141_0.9423087356771827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-ripple":"0.18.0-canary.ca6fc6de.0","@material/radio":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-j3oOwp8vqSWjvLJUp4OZVV/YKXFSsRl23gNyKaeZN7xySYj5LED1ISeLE3Ij1XwVQnM2a8bCyUlnHHmZwdvTQw==","shasum":"b47aeab16b3b0875c72128e29bf9b5556219738c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.ca6fc6de.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfBCRA9TVsSAnZWagAAh44P/3wbaDo8WV8hHnNMzIqd\nfXI2uFjxbKxVFPoe0iHf67X7r/JHgrBTvr/uWGcOLMvpksIpyYYBvt3gnwxd\n+QCfId9IUbiX+gHo5OTN0mt6UoYMB/KzRBiMf1tV6E5gTmnsB9r/bGqY0Oxr\nGxKf9H3jpeVjciHhouyU6o6oZbSdq8A6B2viqNGuxDlwQAaNEmUIYqigcAg2\noDfY/oDSFTYuPG5BqnPD6/+OQVLzllcBwy8BtmVUbVwJY9fzqzM4z9THtyLH\no1MZa50dEPxl4xF6Fz82Wu2Kwt1R9MALCAqRlzoDExOY552UBi9J4g1KcSa3\nVAHNxhTK3+eenMjY6IoK2OuA4NbTY5srzF+MTRytm3YXbw9rMYx1xyhSW0Gx\n9WCH7gYd7Ir6IUlmLaSMS73cgaQJbkB2UKJpywq4/AiQxwOdjB0NzoO9b230\nrX7GjPcW2I/A4PryMQleE4y8eHr6gc65d9dZcGizNwH3H4AqYJCpn11Nabn5\nWWC3NuGfVZsYQ/LCYxmmVyccR+tLzoD0mseeg16KTVHFRrP3I0jy5jewCy0K\n9ZLS45g6zh2EAVFU+2mO/axIImPEoMfzDC7Xw6x6EoQp348pm85D2ofDk0m1\nZx69V+TfYva/R4tSNjs+eTQb7++9PPW85RrDp3KLZcm4BRiMj/kADf95VnZa\nAVlx\r\n=chLC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANLApdlHCWKzGgbD4umgX9szBZM3GVqqTbnEzuFLi60AiEA97jiBE8BSvF7UH/OO05mwT98C3hCD13aUNRpBnhWKU4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.ca6fc6de.0_1593669569595_0.5663235455481948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-ripple":"0.18.0-canary.79f1ec2a.0","@material/radio":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dsDPg/KAkuDuDjHdUyS71YrDQtMbdcKaT6WAIRF6jCxxJHouEZJLTs9ILnZaI3lF1wloaD2iDqwQlJVoDGaNcw==","shasum":"2f2ea27359c4ecef6c218f81ac82224d7c9e816a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.79f1ec2a.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLG/CRA9TVsSAnZWagAAwQsP/RzHrWuCkWvpjdxQkP4b\njoFeyOVZb2Yd5jsbeduvkLaFFLeXic8/RpVi/KVQmecfqJJuU2fWrbb06uRR\nRnZGKk7Q4avHq4WtrNI5fzJ5hF7dP/UViVYr2tw6KiM/RRo1nwO3+n3hUW5E\nMWy5+OYokszPXZtAh1nh6CR709JNEc8ZoqXTvwTkjCqagJ2sJhxrgGiX688Z\n+oA1SR5XDuQ2y9Nm2hxmsrJiZrTLNwCfLNyRExQb8bfc+vqrPPLyO331tbow\n4ezFcz3Zqm3wWWz6eZ1qfCtZjm/EIFkUM1PXOqtwr9TcA9scc7mFJxo8oxE3\nObDCzwc2z9TgLh9dF31K1aknVKfRQFXwdv+DUwTLftBZIVXeoudodmzNwM2D\nYYrjRRQYdrq8q5oJu9cwqcAdez8BF651ShOAlwWcb9SY6bBzRTqD142Z0bVX\nf6Ob8IngbqWB7N+3EQxp9XM0iKDtMovuVgqXAt0Vq8CG0HAbC0/GnjkGqklC\nFsjuQwD8ygBsyp21bJ53F+yYwmFRUMyJb9tulMNJD71qMq/mHqGo3JmFTcNr\no0q1WcB2GjLlPJWlMwtylW9KmoM0deTJgYWCd+rvGEqt143A0NN2X5qLFatz\nJpLir0NBZT2zN4bgydjBoe4aipJnxnNyoUP1fGhSn1ohSCYY6/bcgSU5wKdA\nVN+j\r\n=9+rM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHTRQt8LXhWPs0oA31EBBOm+RFdv3Y4NE50oyMa73n3QIhAIc3g5cinlBLafgzkk0E0IlJD4yj9vJEqMF3DDxUeou9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.79f1ec2a.0_1594143167105_0.3693911004815027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-ripple":"0.18.0-canary.a7bc45ae.0","@material/radio":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HWFrEs+9n5evbPXjn5MNVK0Zqw5Wl8lw+VJ0KJ5xe01pNLF06yLqr/vULh/aJCF3AfpLr8bxQ3G4zpp+1ARcug==","shasum":"6279ff8d7aace8185bb223c67b8792bd689083c5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.a7bc45ae.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KKCRA9TVsSAnZWagAAo9wP/iN/B1BWqj+4EOWbZ4CY\nrN/C/7doRVas1Fpdg+jzY29yUb5aClmsnqwfefKZD4LjlrZaJS/SUpdrHUxa\nP/kloGa4thw/TrPG7kMl5CnrNb2OyMw2ofgi53abDqrEMDiZzOI6BKRzbHoz\nFHVupVBOQdFe6XkhyhBPMzHllE/ZER8MBOrOp0XUrfmJ6J5TEvlvXF6cYVMB\njMfZfXRFkt3vFOqV0wln8/h5IvngIUNPyOLOQ9DMkJEs0lGOtHl7XXBErMKf\norsNuC09Bwahk7iaszhfo9XT0gQ52p3fwrvyj1yisGC1akq8KKGWeD2bc7Yq\ndeMv3lC0Ly55parVGES5ElUyMuBwx9ZNLx9j1fVLwNYRDVxTMlPb/2tKJT99\n6vpPFwXTPuFfq0qTEYhodEh441Y6bTtaUllFmc48UhqslhEt6G2GYZqhG22F\n6wKNPWTdWoSxZoYSNFrSKeCqwHVQZNzK8ywHlTLhsJfE/+6W9gtnSEGLplN4\nu5HE5j5Lt1rhfUMkzEzaXyGhVtHbfsYHkloBrdf9PO9CDRr+nHHaDzUTm5Fk\nPaATu1773FcjX4wDEN8PRAaTXNom4Z0NzKvFG1tYVjFFj2J200jiiXmjXWj/\nBGJ59b6zjO8aTVfk/uKC4u9HEugumAfc9c0w2rlf+eG4ElheHrVjVAMbaH+i\nuWUb\r\n=hPKL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtOW+k3LLj7m3g3a1oDqFQ2Rx6eBbcrR8hqrKNDVncLAiBN1YjXkhrGLMB6W/fagCwSlWbqjg3kJYiv5cvHvepRHA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.a7bc45ae.0_1594315401780_0.2605392267681894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.b184bc1c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-ripple":"0.18.0-canary.b184bc1c.0","@material/radio":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5Lmah5qYFWr62/fTwJ5eAa/htkdGerqdFNogy2It1cUhxK48xU7yXZhJtjHQbpV5riGb5KZQMynvrDKDQXmXIw==","shasum":"8c87f18e6f0298bfb2cf6a6e83b8b4e030d7d603","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.b184bc1c.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1S1CRA9TVsSAnZWagAAQlUP/2286mWfzODaUehQoA8l\nIn948Z1Pd+nKmZxBE25irFRNAapK4sGGaXld2y8bgVMnJQEUXdy413vxsap/\nYxCYI89QedAIT1PbsQxlVsVGv6kDGsp/SX5mp5QrKsCkAWTx+rI91DdAP/DQ\nzHrOz3cIeiEvvC73Zj7KfOn0o91K2BluuwrZhQMnoxpetXUYjTgqbM4iezHp\nn4RpTl0TNNpcwyqU6Z47qOJ1Q237o7Ybsxt3tBRsjNiV9lwJp/K3mpSsueuQ\nozz9W6Ky5P7MLj9wtbAZ+BjHKnWSxdmYC5+iKBZG6pplN6+BSvQmiB4x3tAV\nUUzna9n0hgCLX4pfS1N7BWncb568DlCa8mU/EYJ8DPGULjSzovW6eIyoHXjR\nUJL8CzeYjo3/d5xldal5bF7oyh7XcB8XltINB1QCkk9k2w95vwHl1Cv7OMyK\ng7IASQHy9SoWkBMIJ7NjSoKe/qdE2AqAzgEwRhloCEm62EKbNmdstcZj1t3Y\n5lTljR+1n9YTBA05AdcMrFHa6U45MCs/F2I2YzjXA7sth6kGwZDhh16Pzaal\nOY7uG7ukx68vssa5eynUfEqnfbCC9Ua6n+/PSNbVlsav6bf8b63F1NSmtVWb\neLbNFmb8a4igJRW4jRfblAxptzERi5HaeaWYm2uh3nEXv9Gd7PD6QhYPzdJI\njBqF\r\n=Uv+m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQB/fyNnH8kqDcsqXbnYVtGOujcCsUo4DPnm+ssJQovgIhAM1UHQ9Z9RQkbwm5TAGz4mGB4zC45200SLATaGDYblQG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.b184bc1c.0_1594315955490_0.10962860017104514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.b39fde62.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-ripple":"0.18.0-canary.b39fde62.0","@material/radio":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WwjKVixrGK83KHwJoeUGBM/j9BtvJMmRoEC1j+kJto8s3F1stSZrCU5D4ybWxiEt7EPwe0OLVz/n5pjmHtRp/w==","shasum":"bff8993e43f2edc520e68f5b2751b9fc2ee8b5f1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.b39fde62.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XtCRA9TVsSAnZWagAAGCMP+wUBi5O3FyrjUslOQdOy\nvQnNsqU8qL/CKNOv1uHKUg/oVODiO9Ll2o71m23GGam39BP/luw1fu6uIZCi\ntvwqup7F2c4yWDsw+Ai4dBNZZUFkzwIqyMuXuDWfO10XPtS2NyB1mrGZBvop\njm1kiALe/rrxkk1YtQ3dbBds233Wk/Lb8MY1sAm6Y8HBz6Z/dUbz/ijYgsEj\nHrsj+KTU11fmxhk+jvSCJeokj+jgWaqtRTeLzWE1a3+aMp6u0JFhMbZNZHJ4\njAXw1HU62q7kVI19U99Gr7jpSxgf273yDxy0KXRmLQ7UlEHHmpXzuifKA6qc\ngNLsmCSTC4+WaIsH0rYG9GcUfLFflTs31gZtYFtwVVNP6Zb2Q6Y90nvWUcPi\nfInbEWDEjiOLqZtfNC4P7AnxOovm3sA8FYlTQAJHk3/lKOG36vJyrinuv7g8\nqPwFgz5g1NRQ8wDI0aXryfzRYMMmvz+i2/YdfJpc53cej6ECLN9oq5t8H1gk\nogI0ZdJcuLy9ZXw0DJNAAnnRwT9Jz80s2IVE7hP5kovHCegoO4O9KtxhTL02\n1NxaW9rdXbWhWO3M5MrKDVuLQH4oAGgtm87oG1Ktr+VezGqkvUe+a+QXQHO4\nI8CPjLsah1skQTEaOx9rD+LQwJCLWSGNmJSkO/k1OI7oj9JDLT1Ifn4ldPOR\nGzlY\r\n=4u2U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpPyDdwx4o9AgBGdbCBpDjSbWi5hzwswyBzo1PcRu+ZwIhAMQT1/OfWIlZRwxah9qIda+cDhk/LI3/MXqe5U1lJc/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-radio_0.18.0-canary.b39fde62.0_1594316269319_0.8659871320202928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-ripple":"0.18.0-canary.dfdd8d6c.0","@material/radio":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XfwDgKHusdLZ8M0EDW2YQ9cm+Mh4RQgOcv1GMOfwuiIGSlEunOrGfwGPQLttttfx1SLZIpjw52/0V3Q0hrSAew==","shasum":"84d550f577440275d5acc68e587892780863f1c2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EzCRA9TVsSAnZWagAAiRUP/0edfkmvtmtexTqIB+bj\njAxUcMN97CDjWvqdPkrHqJDeir1M/jwWBJ9j7tVjRnelsXVlCsNKzuGoxoE1\nmLtKaCAlJj7FLC8jMBIWV46mGXOHne4rIRVDxXUmZY1hV+0WgwD2M8PIYTLF\nbBSoraejXZTQ0HFyiFIp83FZrF3Tnf7jlsgGEQFWxhoCf22QEHKJfmo1HS1q\nkGfHFAbwFyDcdAH4eMtt+2/xlV/aPKZbkwNSkiUK7aj+1+v9/gSCuZyGfPfB\n1JaNAhjuVeA7aWcZilvEK9XY1akpeF5xW4RAuLD2MojdXol9KME1LlyI4gyu\nRIzPAWDipTYMsWqdHjbEEQd/UsqDfb+Z2JWxuikN2h6NC5CBpCQIDpSVpJ1c\noMWhQBO/ZlZs5J6dFIvQiOsiSn+4T4HBLtOXYmKyhc+TeEXYPTwUWh2ZHHhV\nvpx1DpL/CPo006/c4DTiXMMXPovg8aVE+17n9pAn3PTqO2zQDnKZetISrnGA\n57UoP6aSmeGiJ5+YxHDo+RsRdMMfvcm43wVFrSXFJSjCiVvwPGuQ+Y0Hek+G\nTMFiU2qR9Ch1XCQeohbdb7cfBVhpiqqSRThnOQvrCFq0mLDy12cxP1bebSgB\n42Atr0KYx+CB4YO5Q7rVOSGgYxpLwrm3tj2c/HHt+l1L00gz21ATlkxV8r1B\n7RhW\r\n=4EA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvLn0It3bNPnp8FuFJPVdhgaluLOmiseCquXXnfEL2sQIhAKP4IDHFmiK+QAgm1bBpqDqjZmQnE4qqKG6ONEB25ZcI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.dfdd8d6c.0_1594319154814_0.9110328325968067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.11cf2694.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-ripple":"0.18.0-canary.11cf2694.0","@material/radio":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NUAZfUajgScXDkXUwThH5lpjHIu8oIoBino4DCGsseA2VY47+IwxtGgM9W/cSL85HxKaLPkNBwOsA2nvDj+8MA==","shasum":"025996f9e8340b7d66a6dcf0ef26e49eb29edb31","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.11cf2694.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4F5CRA9TVsSAnZWagAAwtUP+QGKBwZ9aUGO4M9CqxIC\n3xZ3Fp8zjLnoefUu19GQXEpfdhWuUrf9NNaQ0x0piroyuAzCoLWeiEs/nwYv\nxKgFcqJcD0zoVxGJ9PnnYz889acMmxL3bPBdnROfblLmllU45/41ICedGrIY\n0xGymCBRpNl+PELrSV8/00GN8iUQXDKye1n8Dso9aiAwQzCTYeR7qj8mHEIO\nryhA5PvEZNvXmY2H+gXuUDu/vMVU8R9g+jl2X/nHzaWCx3CP/W53AQQKe25B\nMJAgnjew0KBV+mVN73+VhTxNrD4pMs0NQij9n5Qo6LNP4OX5ci/zVHTAJhv4\nQydc6ERvHTp0mSv0eJtHBpfn0/oNcTkYhofOwhqHsODWO9wq6tilA+65tZWx\nOWgxqHpyIMRLGMGpo69vJsngSOlKRYquQqIo67+itWKP6ZtpNY+Nh5pSRD77\nH5TcfFeRN5zWM3rLedXD6ctUqijf9OKFONjSappd+/Erxl/+gveGQS6uNwji\nlCKNO6G5lO9zMmmCX/9vZaB0GJ6gqHmpSczY3A9AX4ECQ54F/KXlNNUF+Do8\nmkCayQdpDEeL6WGTz4pXlWC0kdzVXsjWWyeSTDGuRimzA9T5bAZVUVaCavb+\naAJqstX8jJMSoyIhJIzna87SF9XcimoKW5s6bHcem9XNjH+eShwXO/IcJLy5\naA1H\r\n=7Nl0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHShgVBn5KEwXFkvLTPMG6CjQjhmxVd7l0SNN/cpH/tiAiEAsiKcgzInkjPwP4eKqf7PIwtfcbEUEQ0+2+vaJ55P3bY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.11cf2694.0_1594327417415_0.9345040235320006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.436d66e9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-ripple":"0.18.0-canary.436d66e9.0","@material/radio":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kYMFu3E+J9XYAayJK1BQ+siajLy5Gb7aABogt/nFOUbLnFukJZoSDtMQr9txn2t2B0k3qCEXnkQSofNzflDhjQ==","shasum":"893fbcc48ee81b622a8ffa5020bd8eda789364a1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.436d66e9.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KdCRA9TVsSAnZWagAAj4kP/1ijBK2W8O/jxpFXMql1\npCNO+8zuD3ynQpTosi5E/ghXxdjne+M+cEa8lxJPKX+vDAKBPKC87U3wtDY6\n5eUQ/HD2fhMkDKa+ExOcko7vnHHtFj21QGg3MKPwfFhGQvfIamGvo1Vd1k/l\nVrJr589/lZIDCNPhxZAdfntBmdCayvaylUSHM83qdxngfV17O6q6fa98J/nw\nqzNdf5S3KHCqBLDKPgAn4XK8KxD+ej0R3MRER7hD6lIvKnWY8Cqzr0taZxSC\n84Ab71SuW+GxDMCSBNocjdpn/83/NqaVO3G19xax3Z49cApy3KYVFmpQRa2Q\nUdn5HlLe7HCX+WMHA/T2zemI92EGcXr7Gvw8Cqm9njElO5HfMdKDB8ZXbKr2\nXvot65mkG26QAWS2oLPhlln+ryhBuQ9zNva39ZjCOU4bRIfxXL0Rqt4STsFO\nH3LaA00xozRXJOFGWWCzOmCt4OycztHr4yfZWK+1VU0rGHLQtjUIK5w6p7Pd\nR2LssjeNZpjvHF8Mj4+cOtJz7+uEm+UyiqdGX6tQPhPvmCYewKrif/atXk1u\nxokOO36u7pOukA4iczvH49PONYbjK/LeDBEOn5T5pba97lo4RXfrxP/vp3Jl\ndJDlhMvbv/Spm3ayh+x7NbGAoWB1NTCecKBC+0NCZ2V/Af1qCSIHjGiRFvF8\nM28D\r\n=wS54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLNmUJQMfRwC9C4gfMyoMJuLqCnKgVx9jx9IbuEYPzIAiEAkMlJY3mBobayvwGhe6Itn64EtFxhVTrh0s7nop2f0oE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.436d66e9.0_1594327708939_0.9227907819705166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.3a44d36b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-ripple":"0.18.0-canary.3a44d36b.0","@material/radio":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-V18//otTOPVoJCtRmRWyUdQZnPn0nbdAjkwp/RYK+N48aKAr6bBr0ZmmAfIvRR4spO7ny5tKWhenj8pvMZ+9rQ==","shasum":"0c4fbf2cfeade29dff9295612b91b2a4bb33f0a8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.3a44d36b.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hLCRA9TVsSAnZWagAAU/0QAJjSNxzLDu0Q+na6rKpL\nGb0UMLpQgvl54Z4q2s04qzZ8JoUWBWzejrTHJG2bIM+HbMlRQ898FYnYC3Lh\nYrmuK3aHFy7wc7VOosHyQcEV+d25YlH6BsU/DvC4+xJVLhK8JgZt6Q6+W1F5\nRZISslhgb5dxoR83CTO8z12D/TANW1MFq1Ec9mmM1QteuELAfKRqnQGMm+91\n7shx/H4kyhGxbwk3mUdwiVdy/g4V9Xae1B2ItiN28WIabtHcJFfL2YaGJhCq\nItYB1AEGlhzdS+0ZcbYATp8kBCSdOJoLzRdYc6ifxSJjFsAp00ZOms0EAdF0\nwbGxGGRK27YBzkxOCRcUNw/0SBHBNBqgZDKcdZUlkP38AlOorwcxbjgrN9yi\nxsQ0Yo7SoGyqWQBSXXQ/N9J4k5hW6seNnxvQpLojAl70xiPZKwT6AyqlB9fW\n3hWmAJTGAdJXv8qbdWAx7OO8GnUWIEqC9cL7FGo17oK97TUpQJBbz502ESwa\nMWsUAz/J8qB8ig2gwp2S+ol4yeEpvKKZViIP0hvxid1g23qwZKvPzPo9yRF9\nD9ANM9y6ecDgcDWGMGWXVHRVdvqpPxavZwiEXMBmhNvl7jJB7J/kTuhSXNXB\neLDXzNWqXxYMYRBfAVg5BP6VvvrP/XugkLUw7i2kLsn/MR8tpPOWgLV/uxs4\nwioZ\r\n=UyzR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtq50/dsWhP4zSMf8Rpmub4EK4Xr84+EnZOFewlK5DvAIgTWmj3d+GABNspcPTUt38mH38uyEQErHbE8IIlA8smb8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.3a44d36b.0_1594341450610_0.4854952135936581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-ripple":"0.18.0-canary.ec11ae6e.0","@material/radio":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mbWEOu8zroKMmAFBRrC56RnYWYL1/pp7JOLoKziIETKcOeidWjIle/WQZ3KKDMlnIpciwLYrs0LYvRAV9OeJSA==","shasum":"680689e8dee0331a02ca75ab352b3b5c1b249cc3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.ec11ae6e.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsKCRA9TVsSAnZWagAAUkgP/1UMx3DQbSF+2L8U9blb\nRsSipuv1h8PwRsv8NYaqiAHwbRtSD0gz5oszfYSL+f9nYmwE3viMq2Knb8V5\nJhq/Cc3jmgj/PFvP6vDdYbazav4aRG1HAaz79+rB+5mbvJXNaHfAsDWhVPcB\ngpdvcahCHEHqxIAEXxeTsD2kQOEhwuQ3WW8b+XwTu/i48EnrEge3TQJhuXzE\n9MoQSBiK3sOMipjmZF+UBGyBAMxeEE8XxVa1T4NQA4U0BNakcmqZotS2UPyb\nDbmPWWIvqSt2fR2el9Connb1LjG4vw+rX0IcxcZmy7sEBK6f4d0bnXH1di9c\n6JNwbDRQpo9GgToVmzgFQ6K+TfFc5NROC8L39LE4ZYO6Zkf8Ve62nqgaj0NS\ncscYJXSwegRw9FySahZz9KSLmjIgyln+U0dLdU7AW95o56yzC0VhTSZ19qiK\n45u6sIZezVISTLWOEFxHBVCxqw1sbbA+Fn086EcUCDbl9cMWD/S2QPCeN4rP\nE51aZCdvnY+kd5ztkM+6xgrNEvoqO7nfNOA1MnERJUBVAEoNtwccXjfs/NCB\n26x2dRJ2n4USSwJI21RvU6YAH3zYZcm6FATIffqg60KYNHKQpMu/DHPdoV+B\na3TuLNcrDZky/k7o11E63gnVkCo/apYGRfBoChSoOCq2dAsUurbrqe79Lgzy\n6fcH\r\n=d8aB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFA0YOicIHgksl5CmU1BgXwPigkKlrkqZNHL0IAHzKzVAiEAoyn2m1ge7ZQJ1Vxs+5sEt5+1UHVK0thYKKjyhUj4H0Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.ec11ae6e.0_1594403594363_0.8100631701759067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.17f6cf27.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-ripple":"0.18.0-canary.17f6cf27.0","@material/radio":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Gk7TJ2XxP9FkFMr6BuRH8zTGi5XdgdkUO1IBfSgMVsXMGMyEKBFwTwABgFEQAG3E/vMIIHack5vAtEjNN5+OCA==","shasum":"ddf6f583e8089a5d06d6179c4d4ac10932575f42","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.17f6cf27.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRZCRA9TVsSAnZWagAANd8P+wT1WCjnhlSjYi4IKBAc\nsebCeBJyq7O5yr+uNZJIYQG1hiNq4lvGtZbZ8Ke8qNuIsEJOpR8RWQiFdJ8s\nv/zNBk0nShMXNJnogDU+dL2hcM2o0H/fH26lD+/1bOsDaAmtZWJox9gwA8wx\nSdncgixZUsrkeqr6xCcPKHXRRQI03V6DOdV2h+YlF6gqUEN6Bnx23xNqh0Xo\nz1ikO05jwpQIUnmjM05TmJdmCWA+6E+VobjLTz3iCtgDKtN02wPgAF5v/zRv\n264slEhM0ifcC9vKVBedcZ9q4R8L43EoWg11m5qg4cIcsMfOw5xVW5xk4Y9u\nOKPsfm7dzjxLb0dO5xq0A7CAuyoOyxwDs7/Wif6+yfZzrLMRF6z0NhxI4sUZ\npSrYwHNEllI24x0YJdZJK4Vo0dSIJB+Tm3Tu4UBjfNB+YmWHju18atnpQ2xu\nUGs8FWDYEDrwazXiz8gE+qR7UHVzvcf2pz8KJ2qsOYWVmrVIjDN9gYCVj/zq\n8NlZTTY83xmmyeMKm4AQ6uq2ZF81kMrQHg5uqx/J8GY4iDIXcb2pKSdIZTaP\nC5H+iMhiToX8GJxVcfxCce+tYXBDSmtAxuNMU5FTlwKDxOE5zZnshtJfQk6v\nX7MuHSmBHWNYq80mr2f/C4w+38fJo/mgvWN9FM9XRq9nw+PvKSG7mscVGMen\nEbpM\r\n=9+X4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/ktOSzr0U5SKAAXqbcqE889ftdjUuWwkNSCoqLvobFAIgEtJlBWKH7SKTQfVMiOS6L8VevCZPF8iPDZ7wLz+lyK4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.17f6cf27.0_1594405976593_0.7000807056788625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.efdfbc21.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-ripple":"0.18.0-canary.efdfbc21.0","@material/radio":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-R7CeL4RGY5/sTfpC6oOA5JWv3UdoPS4TK4fq/jBXJw1f7d5wF082HnGyEzBAa4F8gRsAWOp+cghPCT9kLbLyIQ==","shasum":"df269cec7afefc7b41977571b77962f3383aa0f7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.efdfbc21.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcbCRA9TVsSAnZWagAA3XkP/3zlYMKdEuKc1U0zWGcj\n0Mn2mMpS8yCwxMk7C4PwZGCgqQZ0vPPeW6dXHil/ddZe7fLE2doQLuENvy4Y\n9isYTcO/1jtbBkmiWBDOMuC5C+DJFfUtXmf+CaF5AB7oQlHkz3YbP62CnfR1\nPUIZkLWEXj2IyNH0OoWwBd3M0yNu6QwLSoSYtUug0TgzadQnFGzAKr0KXkRx\nnvDzYWsZbksvtyaRyqSB55gIhHf/aW7qpPBSYB6Z3+1XWMdU0dtXH1ld64GZ\nEyxdid/bC0WfFKzdcSxRgmO1ENyycHyGBD4P2u+2PveZufOGrzYGhA9Gu/Mw\nmNi03K0CPUsHu14b+TPWTHQ84RBwMIAELrl/ne4GZSvWztvyVtOaRSpJl7EB\nRl2uMml5yYd6PvxoWHuRYGFtAbrWjZAsQElf8/V7D8JmjsxcbqmculEOid+0\njlCTe/HAzcV5W2fnK16RoIUQXTZO1PUvJ6QDgUth1ws6q8OoUCtarNxSXkAj\nYz3klH5DgdIowrbb7H5Q/yJHBBXfKcLbPo9XVcE8K+rYHU60qnKZbKheYViU\nnNoGoxIaOP1hg3vIYcmRzAThXVETo2kQE+sRnz5w0oBuh6MELqc9twcIwS7P\nShvabSWylsX2MP+hRjh0YwwSqZj1xXK0pp2FWOEDDXK0EtgSJVbV142QnQyD\nmgYK\r\n=NDv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDofi71KB/TYbPhCDUScqgY5d6FK1ltz5ty97CjqDYlyAiB7p7qLipjW4yrsGHMZZ2KsFXRx3or4E1lPGjQ8+7WuNQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.efdfbc21.0_1594406682968_0.10661480856704886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.bae4339a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-ripple":"0.18.0-canary.bae4339a.0","@material/radio":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bUlGCcB5M67W/H7uX1KiWPaYuvmWFhMXjyANIe7/dJNo1QaJvKf/EGR7+XZSfBVixaeu++pqUdMXhKH4uLzcMQ==","shasum":"ed93238f88588aa1cc6677d633d355a241b00c4e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.bae4339a.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBgCRA9TVsSAnZWagAAO9YQAJfhHK8wMilAQcT10Xiy\nJ+qQvLXGehbI0qDiZ/aVz9toX8+ArS9XJlYNMJjccVR+KtoJ3vnrEVSVhxKI\nSdhpubwG1c1r+eIarPgyqUIiNuXZUtgRd+gvcfgjSu5Ik914OWL3cOw8yJJf\n9zW7wmNIfsyXMTPoHEmANYafCqGvHWpyOmn+aWrLZUqii/HmdCtnKxKOCL2y\n2evaBgRI3tdlh8zehj+W26ny5tDBp6x/9y91Kh9cehKtTQQYASaRNfIuQluA\n9zgfFZOGN3nk2L9DaSPvLWMqq+6DryonxkYM/PEuZRCjuLNUxhxvm47OrPVA\npzJje8h816kd2mT4N5SNu9oHpETt03x/THMkYo47Z0Pi7jfRdffjpzQATBWT\nRJkjgyRzFpH+TpiM3OB8P2oM3pkOnQQWWkggISAXpyaAHhXu7MRxZpSYs35E\nwSZbDLMDs+vrZ3d7jl6XQh79/AponnuAvkZHE8943V7+tK4LcEabuUOxKvOb\nQLmGYWXWS5a8ygVVwuOfJZgn9/CfmNAIV4ZcSFSt63LxIAuRNtw/xCMc6rrX\nFJx/Flva2E9uUlvdgSPsSB6q5AqiwpwH7bEnYfkub1vZkI9pMcN4m8LE9tEp\naWGkCExEuz9NulasFEgrujuchfxOcnJDA0YME9215wndOx1lo3jcXD4Mu4Rj\n85Kq\r\n=o+iF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8/3ZqmO31PffpF6AW3vXcz4coIHfUaLwGmoXgBnp2hAIgKio71flPr8d+7tO0pT0ITO/WjwRLmWzeXz2BmYGmSxM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.bae4339a.0_1594744927737_0.34194897141246505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.28eac13b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-ripple":"0.18.0-canary.28eac13b.0","@material/radio":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wzZv4ut8XbgER16pcaEpejuUrjZZw0BGxg1qYH9QMTu8E0QN9oBBo1f5JryoVrIwzt/mqfdzHAiQyuW/frURvw==","shasum":"fe7a3cafe8c2b72a8dcc90e3bc520b0923ccb45f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.28eac13b.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBnCRA9TVsSAnZWagAAXqYP/ilzK6AOalmRVRRa6BML\nqI+W5sRDztPypMjzuqbyCeb+dbZvtClJ8Vuph0XJFrf4pOxvJ7ndmuAet52f\nplxDyYB1x5VfjDst2tNYpmDmxCBNtTGb/wkWuQAT2bz7Guz7dCvjuO3+IaZn\neNgbN2pL0HI9ZZMjW7cmIpY26FMTdw+eiTmSSzcD8FcxpzVR5ot+mwGTpTY1\n+zkhuvThQvmDeMgaBa5t9dHkq78mJpKbaXGNTJTbwoTXxDkTLNlZP8v/0JlL\nf7jJ7UJhQSPHs+tJhDh10cj6DLv+S0hzYfxEymT4oxnXsgaWuVx7chkNoPXg\nkDX38AS7PK09s8fOrwKL7P3BOfUn6v/CidwNEALVfp9Un3KY4/YjRAg4Y0Hg\nADYBUNqMB/rtQ245JpLIWzxSFU+Flb3JglUo30VPtgeEQ+4Bci7q1T1SMBzZ\nLxYNzwK+YGtTpKuJch358z+rJr52NLLukfVVunBYos8ewdcsjkNiwoSeHCf/\nMNXvKChUR2W9FLzpYFULoWBcFZdYqGQd+z8vtIck8QL91mLsb2nhCHSu07ai\niLJPy1MusV9iUSwfcIWTBXswWHsfcoqnL6cUDajWqgXqxGIHWUSNUdrRlmIl\nJTYCqPwa2+YAKoq8VaO30D66AbD+YDFYAtB+SfT5ESgg5rv1Jt6EF/pCTCXV\nMKlt\r\n=2F+I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgClg12B3vrEE1tDfLJeXtkcYdXDTxzKTF7+GrCGDtaAiEA37P0VSBr1TzpODhkxPhPK56VBazToU2tImA5LSp6G1E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.28eac13b.0_1594765414844_0.7712321136524256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.44966b65.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-ripple":"0.18.0-canary.44966b65.0","@material/radio":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VKsYFkp55+zgJgcDSYP8cFPoiPpzGxK+7iAwr+qGguxbjbB45pUj6p/tYIrPTjvwi6X03WEsxHQSy0hgK6oM6A==","shasum":"508b8463b7c9357e6c6d041abe48c40969e955bd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.44966b65.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VSCRA9TVsSAnZWagAAiqcP/0ihEHxFF0HPN/l1PPr5\nuhe46g5Xld/6ybfbpG0AQH+l623EGlax2g73kfRyMIW35NYujPrtRSHoVa84\ndN6RqityCR9/E/JPF4CBFD1Lx4/iXX975CxkvwJRdZF/4Fihk45LtURwz9xD\nuFoUbpJvouJGYctZcAYoQNpsbZEoXEsIOsw7uzzoVD3yoS0kNBUkkrBZXabv\ngWfPkhiWaQVaGJLZW7BSo3fTrrG7sNHq3O9LCNtmVWcdxdF6oElba1sfMimt\nxvVUCcEn7bcrelFPqcx32h71yO5a5/RdbKm8t1BRX8D/KoiFl3jTyB5dRBy2\nLc/AIxtusy5zHNDetNcc56Mp9mgvOuIrA7jI0Qq1DHNoJJnbdpjFKmOcTOxl\nIU8r+57zBNLupf4KE1jrkXRlileKQEpKIpOPNWGOe/N9ViNqjKFX7nC50C4c\nv2lNUllEHqmqqBhuJnUnvGlJMnvFcqA1zOxcoASSVsuCLeqJc8h+lo3hQrmC\n48IjTKQSbUf4YbiQ3Gh+F4nT3FzXBryQu1B1/CL4NgnqrvDG1kGXaa7GBuWa\nFw0q1VrC+aRTZyO+K5GPA4/r0C/4qj0Ii7TDO3AA45qtoRQIukHH5QYYyFbP\nkf7prgd6raQhPkdfU1L83VQ9gw/Zc+UCk7XR+/uxlgvneYUr6njKl3hOEuqq\nOkzK\r\n=65Ma\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHu99mXk6PGVxiVAXmEyc47+7OTQVyUr1ZcMrs12HLaAiEAwvwr1szwj9UiuVv69TJ/LCV1p7OCrSO/LxfnMQ9X1Zs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.44966b65.0_1594836305771_0.2692278035083415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-ripple":"0.18.0-canary.3ef0ef60.0","@material/radio":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-M0iMKjQuQH+BMDTH3VAF45oZoRZa5Kl6tj5w40r1Re4Hh5HspFtdouxXqu8827QQGgnTogHaIqZWWMZC/dMu3w==","shasum":"7d6fef40ae86262aba8f174362a29cbe7dec7622","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.3ef0ef60.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZdCRA9TVsSAnZWagAACwwP/2Zg6gykYUBlzKFB/4tP\nlMzgdx//B5ABFubkTbFlFCvdYXzSQl/zKCTBiaKR1CH6yg86bSnz/3SrSWRh\n18fTBHN+i1nGcIuFDpBiwfsOsP0ennBIBoH+fP099bqkxXiXJQVOzw1Crmxk\noIlbGV1G1GMxQm5YMYYh4pRqIZK5SW7HHAlDuB+XsjIy3mrqiJERsl/mAydN\nwhhODPkseJcG/V+1L0ums9lycGPHWQNUnkrpHWnX8sHOwk9FGOPZGjxnVXvM\nsLOMDU0Mw009cCUlUwV5q0LjC3XBgFGjKnyHLZ3Epa4lTlk4DCsTbGTp/8hm\nL1NUgKGblBmKyaLBhlSrFPePThXMRe4usxT6+LLwEy7vWSqNVAbDG7IvAbvj\nOkpybj5kTcY2hc/e3/1s2ByqnSuk8lw6mzG8GPnB7x3cfzbGwdUd9wB+5nQ+\nHg9ghQ3apK9SBzDTosfl7r4s4PGe2r1yQlw9ILZRc0MPcPAGpplGFj6Xd1pb\nSY09UJEnukMdD4JlJHWgIX8c+xK/W0YKWJ9ZsVpYiFqQqKEA/c9tPh2s7llW\nmAwXQFFpf43bysfUtui176VM9+L2yYoZPwrhiVb6jg6SqBSBXRIJAGeJw911\nvYNcBdYlKWIYcy9ndigCyUznOgctSH2pUUF4dxbb9LQPs/OI2SSWxA+a4kGD\n0/qE\r\n=1mhM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY+2UmDMMAwN9oAVkHL1WuqtkIIqAjRSq7gIdpnLa+agIgYEnYUJQ8fXuc0lO2ig3EHb7MzTUNcynf7B0GqMxdqi0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.3ef0ef60.0_1594918492923_0.5557101686211923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-ripple":"0.18.0-canary.fcebf9e6.0","@material/radio":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZEUUnLikMBcawNJt43Ueg4hfMymnAtRTGYkhMe+B9m4qiNYec7uves8eVF1OC8kWj8cs9EryL8o/DmSQU053Aw==","shasum":"5ba442333b00cfbeed07de7c6fde671277bea2b5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.fcebf9e6.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZ0CRA9TVsSAnZWagAAIgoP/2Iu53ymPApd22ENudsR\nvl3CxP/LFYrZtjQMf9A6OeNSI0W3Toiv3UvYhxPkmL1d6nPmvSNto4JJriXE\nqH7FpvvEiI9hHd2GJOu1FrvFK16ClhT00/S8f4189Ye/KxugYWNYFVCrpkJA\nUKPuD+wZ0tGH7UyDVkl1I45ZYjUDrvfrur+eXr7mUfnSGfC4n5rMwNS/2OU3\nOnpbPGkWN9oAz0LyQVdoTo5D7cdP7kP4k8q1zT91bekgPs1ZAglRbAc6RRkL\nXC3iYiH5S4Y1Wx+svWNmhr6Vsy8OMgP2oaUeTnbpbl26X6/L5zrQUbcVP909\nR7qEij/TBhIvyaWHNIRtU+sEvZnv76Oj8pcQuGeOUGFzAvNSluxenpzI1nYd\nZqlvX3hxgR4kgu+iJZYdTdxlz3ArXfpS+fmbuX1CvSXV4bb1kF8YtYKha4S5\nhqsDnEKnWv0fL6SOVzeT00Vg48f7Jh+knJhz70RVaSf6mlTL4SOgp3h7HHGf\nE799mBaCNluwv6FVg1BlFU9LauPLFIr2WbQSrmvLU/8WQlWcJD8LFovwegQQ\nN319C/PZNulYgtzDU8HvlnNHrvBYrbD21osyPxROAprLccBX49BcSoOJ+3J2\n+v0/Fh646bd+9MSoW/BXPWDVplJ+MYY/Vj/SuRcojw2VCZuZ3kjtTOkjpOQI\nLU3B\r\n=dZ7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEyIHHDSTTb2no/PJNrpjqdCE4fN1/TKFxTQ7fkByibAIhAMV+B47AbCU2Weh6Bft05+exoIAlfldfi+FTZz91ogte"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.fcebf9e6.0_1595270772404_0.15258753680426684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.b6a772df.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-ripple":"0.18.0-canary.b6a772df.0","@material/radio":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RrK5ljaVgjU8zkLAteNUId6KNsC29pHkYvJWHJzMqYNb1tlB+Egat0B60AAxW7h2VrhsMckfOCWnC3YAsXnOfw==","shasum":"dc4da6459374d82e918d1c25df811c5d325c2302","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.b6a772df.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7SCRA9TVsSAnZWagAAOqUP/3RZvJmSHeea8KGZudnN\nOClLHrYBM42pkiyAlIcyfLEsiQisi5Avs2wyHyuL9N6OxX+4c9lrlt8sUwxY\nwgjwIzaGEhWwP/rM4fmq5BMo7OHf7dlGWqolqkp33I0209W3uhcsU/LRTyJJ\n8rmvqkD5JLSEUm9TqjFwSUSmF7wf50Nm31o5g7xkwWzZnIDny4bGaNTvX3KK\nnwYTDa/iiNjTdxuKr0aGxF18048SFcyyzfVcosjvQoVWfUhMYMKrtpJ8hMrI\nkHUmknEih8ekXxNQ7rlqkX8ldoqFi4SUeBAlO/e3AZCIDB/iJgbpWivyvolw\nasKjY5o7ch1x5ryI1uxVxA1pcvVRt3PpMtZvDEwKBfqPH5De5P1/N/IhTimL\ns0MrkA8Q8TXJMB22o5jyNt9XZR3KA6ZZrnfdN+483kvVkJVYlIhoen5f9Loq\n1KtMfmgBD9kK2hMRQPaezkcI5uuDCYc+k1Uf3qJtyLZN4DLBPopDfpOHsvqq\nGjvyVbAsAQbZ12Uh0QNau6VCAIvNEYSfMVb/VhM1Hu2gUzi0H0NZHPPYjlXC\nzR/ZodVX+WC+fWxAMeOPI1x3poe+sj6XKpqmCXnjvIo4v4MaFnS8tDxVBf8A\n5NLfd2MnZ7S9A8STRXHZ48CozbDhpr1cH7h6zpgctjMUnTj35Cn/I4v+I6g8\nyroe\r\n=O7e9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPOJJulu8sHA9xJZQ2j7QTcctsC2BZln/+pyGApG+B5AiEAxmtN+k+vspi0aRA4r4wfSRu9cEFUEmFLu97N0gXau7Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.b6a772df.0_1595285201591_0.10130211839510461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-ripple":"0.18.0-canary.f6a6ca38.0","@material/radio":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ximJ0A6W5nZo7Ne4g/i8mZuV+ypwZePzDmm07/tsYw4183GE2PDM3TG7h/Vgld01B0kCFxkYhPnR9jTG9jGtng==","shasum":"dd14ff0445cefafed193ba56faa5e90a9a094224","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.f6a6ca38.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqcCRA9TVsSAnZWagAAVG0QAILg7lH5MndAalO5u6vA\ntObFX8tmpF31otiwOJXBwsmG1H7Iz4YO7rl78/SxE4AL/0p3vKxParI8OHd3\nY+SWtWVKDqeqI0JP9hxMhWbPmdrh02E6+ZVksk+jbml+HDg/bbzDQfdAbJ2l\nV0kfEB9KXNxZf+nzTo4XjL3yyu/K5VVScVDnhPHOXwrUK9gO3vI6iy5WGBY4\njy6BGTMpwChZrSmfTOTPwU/P+TKvdq4H0W6Khli3XHOftJkv36eED7UxSBoi\nTzEcL0qJa5OpS0fmGT3a+2G7ZZFLggtxxbiNAmuNWn4Q6i/RFJPPsN9g89jo\nt+XI2uyzTN3zGVKD/LfYctuy7UjY6KdZIG2j6gYZiFwYgaQjUCYJaUL5hvYm\nsyii8q1annuvIhGwq/oh+xBBcC4KHepzPq/+piGBcZ78icDuQL+8uLd0H/lp\nsOZc0AbCHK0lznQXcMq5ZB6IOQQg3DHmqHSPcVhLpheDN1FJ+xmandHWse/1\n9V0xb2gGpoWjAvmMCpDlaCubLTKmnMCCcrG+MOcN6yeHo4qsvIR3km499OLe\ncBciB/shUWAMG6nNqA/rlro/be0kCedYeRdB6JUkCzIk7qUNwXaIUzY383VW\n3kvA0COVolk7n0mK0WZAiYF/m21xkkLKu0b5HLVvlhZNT9vXgNxrBAuSwrGC\nElHq\r\n=kTcQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANrzpL8mT0ykaIy7iODQ70D7qtz0dsG7oI3uZ57n13EAiEAkpE2qbqVjQjPmm6reUZfLaNYUghJL6GYqE6yiawM+YM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.f6a6ca38.0_1595349660215_0.3192168542341738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.647dd6b7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-ripple":"0.18.0-canary.647dd6b7.0","@material/radio":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nbody {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-49haoz3qELvSVbQEEE8GMGH2KcYdfBdlxVj7wkvZ7vkMbABuz48xX41mCve9flMg0adhN6nxe15jrwqXsODlng==","shasum":"6a37b69a810cdb85670686f7f28127d5dd7928f8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.647dd6b7.0.tgz","fileCount":20,"unpackedSize":114870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzdsCRA9TVsSAnZWagAATtAP/j9+ls5YWALdEU434rDz\nxAzgTDwUP7n6XvTGiiEqLGKgGTLcaKAPQXxHCdvPNBXzduwz5tqNW6K7nSQm\nmL9d/76Sf95Pr1OldYmbdWBcPAByq3c5ILXzA5JLHbKAvJcq4xvTlkRy7GRw\nnnVvq+XW2K7Meb5KHMEp97RlsHQiK7z+AT5T2WEtmCcRhcB5oqrtb4w7Qs75\n/qbziXgz6Tzr64aM6bkV6UkCFVljsxxxxpfxEs1FJT+Ca1E4HDajifAjUqAa\nxH+TQH2FWwxGDp4YxdnC0m63WsEwtxSZ19ITAJv2o3oBB9WwGNMaCWB85qhZ\n++hHR6dz5flL6IPMljhvDKO0co22efDY1kvg66ptzf3OVzYAqaDMFLFqVcgR\nx2niXqHWDfBrHoEUjrPI5dSB0Lyyxpqjcnjzw2rbE7UCutCGX83iuOaVTgD6\nf2aGykPo9lpLNW4vcQo3RBoE6knggLa2gxnkH1QRQ6k4CWME8lIiynIxjhSP\n1a/uRz8v5McHgbPosH22HQaNOpIOjC0em0TU6zW1jm0zGalyDPnIj6odH5I8\nx1Szns/3emsJg3+M5e2mKORLDuvRKbm6uPiXPR9n5OXHPkUZDuy4ucYMb2fb\nSgUAnl6TgmOH5ZFXm5qcGn+s3YcUJIGMCigZdPm1qoDPO9h3LHs+ty5WRwIS\n3Ij7\r\n=JMTY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS7rDAVxgkHI+315vKh0GvlreR0n3zhV3OkjjpkC8BbgIgQISsBsBpNQ8h+vW2oDsNU0jvIdyzSFNJQG4xMbE15sE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.647dd6b7.0_1595357036101_0.3520427183916641"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.3cb7406f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-ripple":"0.18.0-canary.3cb7406f.0","@material/radio":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gldGXY3EKS9WrCaBOOXkvp941bDlx2xEnNskFFHt9ARbDejc7pOVAAOBAGxt3kYsqfVVDsbIF9Xtz9vK4LSwyQ==","shasum":"89fedbff94038d38b09b33ffa2881a2886d97b4e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.3cb7406f.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwmCRA9TVsSAnZWagAAxGMQAIyrbk2Q+Fb0BP0lnHU/\nsTvjzV/6E+pjmxsl5rCSDS34yRr+uxQJrAkhUitmZ3b82DC0JAIacpZVpljW\ndLi29G/qf7dJOgieffb8eU/1ZRzcvMkn4StuRBd2C2G2nnqAnZXDSHzrXO5b\nkIQDePLTMjINvg/B1UQh8BCF5LEnIAocMIJU3u55xU7r/TtQlpNYNAVHVsRW\nJ9oz+/SY1bFRo+iDJvEPHsKzITOlM4ppHhmmvpiS7j6+KBX9PP1iR5mrzz5A\n2NoMzpS6wk2sr2Vaa4wwg6NJB31P2Ub1wMyNpZpi1TGNvwBKqn4OauvcVnKq\nbDzVIJctiP3HwK4LK3YhdPVAcFkVtItHeJVPxlCHukSvIpTQsn98SRw10EI/\n/zZAH2xb17nR1W68WzPLEUhVrcW9tlAQjKx3n/2lw0B6rCHmMx3m3mkKZn9X\nB7g8rS7zHT1Hxm1xd/JAh2CarfPsUfeG2+BWx4l37/tKdD2CgCeG8vWeszsA\nVud5Xq+17ABvmhNHbgt7M+Vx7moqt6XZ1P0hZLwpSv1rJNm02+kuVkn8WLBX\nrAiRWtQTcdei+w1wudX6ZJt3CDoVoQD2ADmWZ0qi41epEa5SQDO2RMkanpFa\n/YReAm8EphnLgPytYhAau/rvtlC/N0w6yxmtL4R2SARjyqFVbvzN4rtAMc9c\nH5j8\r\n=5Ohr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIED/wZtkaL/GaibcT3ojs/vfCPRRMUFJT9GaoOeI9oMOAiEA3wFn0ia/QAj47L5x/0X31j/vegZsPE2KCSEM4BpWq+c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.3cb7406f.0_1595444261734_0.6117776701123825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.5717a5a1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-ripple":"0.18.0-canary.5717a5a1.0","@material/radio":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-F+04qgXJLNwvtl6x7ADDvjlz96AwUPLRJYXLDMhwUgA9vJ+QnUtZxMRt11CWiLdvvi6rzdQnUeJ25VIEfpz7Kw==","shasum":"8a8111cc9a293c3120ba5e652768f707f127bfc4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.5717a5a1.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLIzCRA9TVsSAnZWagAAICwP/3enONu188C+ZmMV+fX5\nAZUZQQileeCHRuoAaEo5EJhdI8XWT87WQD8+1MVleWqBnB8LSvoBcqEdVQU7\nR1MCGfMHg22K0H5BxcYLL8l3uc8F10TwL51bnCE5ExnfMj2+jm9u6oHX/fvC\nVQtzcDXVgmGovfbHyPMlwfKTgB2MRoTRy69nA//xk81TUzWkxpgYysbAcU8S\nz1fadVssBNo80F1Hoht+C/gXuZCv86bMXHh8m4fLnl0CV5v/Y5aHBhJ/UZqZ\n1crw7X4txQfcVWXfDT6KgdA0gVmkwe2LggxwcqlnBT+QKz4RgtAy6Lq5WcLT\nt0hrWOOgT/PP4NXA4/bk98Hpe+Elej1Zip7qEYDLPlBC8h7i+zPvp4kD5koR\nRb6D/ijRkY6y+eIQiOeEeqIjWETnUzx2K0ijlCugOXtdkBB65T2gOf8+fhzA\n0iqfaa0PNw5noQuWhM7rqM5D0+AediPMMuAeJDyXk/4FbvD75t7UErYsYObT\nVaxmHjLelJkFtc3mO/wCziEOhyklTNQY8RL2pEHI2LTJY3jw7Jc+EMYT5oMO\n9kEzaM1BCUMBTpWKRj3KN4gzMPplWr9tSo3KPNee+a97jwQ05XGDzHeQX3lj\ne9i8i5jZFnfuTZh9kSDTr438beCQToOujRyn/O4IpOg7h0e79AA4LxgsB76q\nhwwV\r\n=mYlk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHX9LQvohz3cOxGFDou+07HAyK3N5fPUSCWJa8w3ER+CAiBUnQEOKZHP3kZnrsAd7MvgAu8KSMVXGcNDRsZAPBdQKQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.5717a5a1.0_1595454003401_0.8722324564400099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-ripple":"0.18.0-canary.d84cd4b2.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-P8mq81J8BSOa2cwBCk0UfkKWa+gzpuXnRk8GH7WJXIPcaTnJKqjhkaMDMgObUjRPtpieIt0u5Le3X68O5teo5Q==","shasum":"b817e74d83244bff4c9b67ec1b62cf740adec9d7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.d84cd4b2.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKrCRA9TVsSAnZWagAAl40QAIQPQI53BWIarTCwzRbj\nQEn2KVgt7/K9kKlEOT8QxXW/eLSgNK7rEJAzn7LJxQJNWwxzEbG+Kei17+NI\nLQ1wMk2kBo4PqFLWk8o3gnpUelUoifgwi0tRgY3NV0s7mLubkzpX66AACNFd\nHMry3qNzjw7F27NW0oHWZpZXkNNZHJQczZ0fOSfBxeApaOpq0VPGa6mNej1u\nfs3mLNQ3glvjF+wN/sCn7M6C/91Y9/rLPL7bTfiqUZnvZBxRS3q8ITjAjVzz\nOLb5UQgNb4I/jFvp7d7bx7odysMzKWVSU8t4FFB/usYGujWjwIN0RTGVsyH8\novfhzk8RaQzSAHKwEPdb9ePBXRvHqZcw+rgQNwXnKWC1YBKjWr3/b8EbPGUo\nAKQgUIrxRzXJEkrm9GqYoMMKgmmTDgdAbXZKQGljnl3FI68fSp991F/sYVoH\nTpgx6mlBwMP93mLeCCXW/cw6Slqp6fpTSuviZY8NgL3TR5p7Ese1IEQ5Su3P\npIYSsfHGQiYP6q4gX1Ho9BkGEzAqGy644fzqnwl63O3arcgYpKXtdALlVKr1\nkziODr2F1e/puiEr+p2nNVb2AKhWhjlzXLwUAXVrsuo537mhcOsScz9lF+1C\n83RoaL7FdOjG/NdlxHafL+ebo2ElEIbSDjRTUSHipvEktCQmqib6lMsoz+8O\ndotJ\r\n=4bzm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMmgwnKMb48+xj6EscdcDLihg8ShAdgmBsJYoh1p34BAiEAy9SrynphbAgsVQiZ8OTg5B0SWPd+eQYZ10nqYGfS+ng="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.d84cd4b2.0_1595454122946_0.22606139031963646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.f279e7fc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-ripple":"0.18.0-canary.f279e7fc.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ot5ySFHP9+hFltUSMvvcOAgDEroO/uu7+J4274YoGBdnQrQxoygj61t1YhjSHsAy+sIFqcWi3Vba+qDkKPagnw==","shasum":"20ac0edd45303b0707732c4b79665437bc7417ff","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.f279e7fc.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcRCRA9TVsSAnZWagAAhbcP/Rg7M51ttabXCrPmeCAy\ndBB46VkLCkeNuMlJtuY2rFIcuMvdp+jYU7+l5jsENH8n+c5jL6JZDJ94SS0d\nfmvVwn5ndF0w6TYJtPj0WoVJJPFNYotC7reGNMzdUXk2gUbvJzXiRFQ0E4Uu\nXIk3coczKKWJWpIK/U6ylQEt4ugmWqPTzID0+KJ38BuNgjyMDAAX2RDmAEp1\n/DCvE3Ydx0tA2JsiYotRS7gX11ACmEDslN86gxNAY378GGqyjWJnaGAPMIPa\neBVGoeh7jpARzSolB/Nu9eaVkly+JELxyUSxDOuI8eCgU+Sintf1XGvClAxW\neirnkR3uCnkR+7IA6hGCJ2KhwHHTD5WJHnTIlZMqIPUZcECwbgmEM7DRUQit\nltDZncCvgwtAuo5x3lo36mfDZNi38+hijJRMejMQo+Iw7Ykdhw+mIxqGKyNd\nYhJ6bWyvD4KCDEhx6UKMsUf2J1fswMKKNNN+RCrUgKXdrexGGv5wPDLF8e7D\nlk+sgZT8F73xbSr/VXEmJHfX/uybQxw8xlPXrNIl+GTuwAcjPvloV0CCU1y0\nViswRjD3Ak+2/COeRgFf2vRbjvxw0l90DbhtYhEXaD+jUz3UrrsasgsM8ukt\n0tyTZMmjU6D+6fHr5KuS0qXXJKf17vOeNEdQub8U1IJbaO78742Nw/FutXwY\n+D4f\r\n=H0BD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6qKg2uieENIpDms7t5jYU81goRhYds5IVc2RNqYTmIAiA3C7RMchJfn9Gu8V7qr87HgaUYqt8C69MKIlKIwkNXVw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.f279e7fc.0_1595455249517_0.7788926768546425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.f181e3bc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-ripple":"0.18.0-canary.f181e3bc.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mGYB4vyHg4Y5y/vlwXLZ0Qaybu87QF/EqV2sWrVPZS1x31DuEs4hiEK7omoeBrWE4d9zvFJjpf32odiTDlTC6g==","shasum":"5fa7d3294d8d22ebc0447f46fda53cb0a9954e38","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.f181e3bc.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeKCRA9TVsSAnZWagAAO2IP/jXnXdOqC/lqnr9kmiI8\n89Jg7cPPH+b2CQRcihTEKnWCpqLTYonkrTbIsq4BEKuIrFCwXs+8EGaVAY2y\nExWC6RTc0KcZKO6HDOZWx1YQNktZKARgb+QmStLiMDJ/JVsmNaepoE45w8QQ\nHBmR5q3R5AH9U3LmcWs/3O5Mzn4gyq4Z48rUnRjMR8Sax2odINITNEqtrpqU\nabDBt5gi9VZ1LFARulApkzxWYuXu6KnPD22qxOugNN7f0/Nzszkb+bLcimVH\n4A9pTLX9IL4B5rEz1bK1ne4j+3HbHj74KdXxVXG9XtKG3cqxa6OK0Yj8XWaP\n2EFGgJQcUjqEc6ozaeD/Z1QY3dvb8ZXv8xzyNIPlnq0ApwaNtxQrVduj1jpO\nS5USDg0c6EkerABBatTkZQemQJV0TyNr7v57jnp/fSRdkI3WJIukZ5JDP7Sq\nT3zuHqnMCILIlOAX6eZipZululcT7mXizLdN4aUoQ3oTraujdPIEhWwMB1iD\nnK7Tfe2ensIcqh8EFVNcqA/EES/ZkXrm2qY4dcEpXjXYcQMYUPsrrCVgc8GU\n7bGqGbI6CtFe63u1qupdHB9uyu5V+DhbGwNLRgTRav/kRrVEqKdwv9z949nC\nDo6/hdmGSLDNPVQow1zVhxWt1N0VoO4vQDxQ5gwAope+Oe3UzP02JOvfOqgn\ninHb\r\n=heM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr9PqLp4R7ccZicvYcPmFa8qlq8kWtfMbXJYaI6B/lxwIhAP/rr5kiMIhO+c9DJOgkquVdGkh5LnnxWfjNnO/A/EPr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.f181e3bc.0_1595455369946_0.8124327743130799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.346a622a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-ripple":"0.18.0-canary.346a622a.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uqqyPw0f1GSVG3IPhbpuuiFC+DVOhlwOFM0PfWiKfqnSGEe9QAWvRGuZmPldQmp6rK5jeMlcb50rXFxVBVIg0g==","shasum":"cb33dc2eabb4a7a36ac56e610dba7601dc314ffd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.346a622a.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5YCRA9TVsSAnZWagAADJYP/iKWDj+mwFdWxITaCEgz\nrWI+HsUgPSeDcTHbu4X2ds9tgziu+Javh9uFEfxXYddNvDj1SFWR1hNYT8ul\n/kkZor6YsbnmwTqKyUiLMmJjocIUkYezPkx3tTviB2lkG/NQCcLXo1sKWw2O\nP5/igmXMX8ToEo4T+xEgyuPql9DaVa31PVOjDGiWorDRjsbxmxrrQpKQOJS8\ngdeYvdq0LilPHOikxzcVlYX5F610pOSArnW4mxAFO6O12Ye7Gt5AelWzL+OI\nGzyFPRaIbN+1zzFj6DL8QqipTYNJPDoXkBxOM6ZjLkD1KD/s8u1ynPkIT2Lb\nguQwCG44gyY6S23Vvlvs2lSCKfByVDgfy04dqBweiXsj3VBfXxxQ7B+zLpJG\n+c3nQ69rgNcR+oHDzc+lk4oL/b8d3+WQgzJ6BV/MlxM8+YGJqKF/i78qsr7U\nFuNx/xhd+hxmDzYvqmZC4WNRPUJ1Ybsccmek1CzPKheFl8AdzojiEppZsLd7\nwo0c4kzt2z5fUbFGSWJT1C1o8InwprpeXukA4HXAEQHy3gvSSwTDKpL4724u\ng1GfV7EfRBEQl4HoVoun3a1bKvkMsTdZSeskSBBAjSOWIQQkNGcQHZbVZKMy\nrb6J6dms9Fb9OMvDiKqrzGYkv40o0Ygo7x+/E/7Hup2VzdyCQpaZWWg4BkEO\npe50\r\n=MY08\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnYd36TMX02WZa3jEYem4KafU03BnGtdX5g5uoiMG1RAiA/HuAIJX53rAVa8TmEHmYkTzVWb2xb3WVhMtn30zF63w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.346a622a.0_1595461208100_0.523619645395107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.c9e8a848.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-ripple":"0.18.0-canary.c9e8a848.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sqMJ95RLstdd1qgDRUy2t6DcOWWFCmtm6SExDSsrB6F+sd8fdEND3eBC1w2AIK3+H7CP0rKj4vC/G3yy62UwAA==","shasum":"11e1b74c76a580953bbef0c4ad7edb5484b294d7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.c9e8a848.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOLCRA9TVsSAnZWagAAVtkP/09HnADGGC6p6t37IL47\nLG7HQ3N5AUpRyFXenYyHzK1TP+wIzvXVap0Q2YyDJ/r/UIJyRBmoKlWt+UJl\ndzrf/nWSl2ur+BGUSgH2tr6LM+lVCeaj8U7kuyD1qbrCMWSql9CC9lYJF9FY\n1EQgLixbWnDgQXCOa4gvvnILhaBzE9/QOaZkr3pXGGNdt7QZpe77RtioGv5+\n9eoitK9LxzBY1R9rgixP+46743BUZXkUy813q4/aiQcpxm+BCDocGyPSTNA+\n/dQ/MZJCO2bh2OX+RAY5UPCGTdClsgVfZ2YiKebNyf8SBYinlIvzxwJktfwj\n3LiOQYADMestbUukVcjCiV8YlKhPIamvECQ2fW3h08CtZvdL0rmAITRCzxG8\nA7QMKoBQzyv+27fC7/1vwEkeCNaT+KFpThBVhIr5O/w3lYIMDOor57cKJm/o\nffDgNhPYHEoITEeAySfowD4MXtpqsk6xNDJalRhIJhUjxYPok4k4R5rbQgSl\nCtYvAc8UOlO3AiXkIywEc10D8PIuEjWB1sNAjjzfup0KABEGs6HXkESMszXW\n5ALKGz+4SK5rjPZcRfnjjSjSaUEtB41ZAEdcXkR7OUNDZfY89Wi/yPG17fmJ\nxkf6/K08dffrzZUYurYt8KaneXt+K1tna6Rp4nGKjUuewa4o9xGnKR55bxTB\nEQu6\r\n=w47q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFchM7qAXFFLxjmIWhvkrWkBFoI9FSnF5U7S2COrQXnRAiEAoB42XfgicMxL+XRu+aWWnqn3vPFWikimeipBJFO5Cuw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.c9e8a848.0_1595466635173_0.4558014050905197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.718c385c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-ripple":"0.18.0-canary.718c385c.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sIDWTnF2pjk/XyrJLSXI27/3loMZQDqKMXcS/waABI0/OU0+nuKZUQbKOyWsZ+SaKyzwrqkZQdc3nX8TPd2IGA==","shasum":"0715d40c883febea87e83cac3d176c3b861af0c3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.718c385c.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3PCRA9TVsSAnZWagAAbgIP+QBFMLXbTCxP/gunMKE1\nWPPZIjE+1TyTe+wXCJ9KRqMEqGWJMWZmtGIPwr0/Bue99ljGgNU7WXMfNdOD\nxZHUx7PVGgWQaicqTqE7O037RIWlNa+ZIKshokTjYM1fj/GttChXuPWJdmXV\n3IFATZTiAVv9Us30KyIIvlXhXdTiJbOCeLIuIWi0mVdleIehEqP6Zu1H3Lb3\n0ENWaNZ/KjP1t9ViQevncWn5dF9g8k5h0BK/WBKK5vlRhmpqGlC0LkAzylc8\neP3BxGj/OM2JeijbJNayxKpKyM4tevo1ix+BYQe/wnXOC4eLFvEktlNmC9HU\nS7GrdA96um8WH+oOvVAVtam/taF5NX3HSfhYHBiKA07q+goyzNCSw/aAvbP8\nFm5FVp8DNycvfBcJz/F+uld1XIFRw1IBOYGFT2N1Vp6xXkYbk49KTMzLFXwM\nTitUlLioPBLL5/0bG99fA8ghww5niVbCdaDGR4v2jjU3oxw9O3hHe11YCFJJ\nJdU94PKLT/8bxNv3OvWp9mN5nUOdEiCia7f/YAiV16wmo3gfaSS1oFOz8uMH\noCfoUD/mSwHs+UayB6UeehqwXABqYAz8++U/GxZOBmGbX6J/SuE6O5Ll6WRS\nIMMCU0E22LW3fMSxVQTsijH92YqAFAM9fP/DmCPq8+JT1+xCqLcNgi9pRpYn\nB/T5\r\n=0aRg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMMSVly5itgQ3sDbTX1vwBUDURGwdSU15i5VYFWsBLTAiEAz5+F/F6JNNrKNzDylVoVea2HGJtrmlcDhGXb4rePcug="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.718c385c.0_1595534799155_0.7518879085579295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.cd516a27.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-ripple":"0.18.0-canary.cd516a27.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4nnIbzeskJzyrz8orLap87DifQfZbeyvC1Th2LLdzMM8jQCe6AiPcvhjpoGXLxPrsFCbFAT6z+C0XgWcx059zQ==","shasum":"6601d8356eed916a5bc4835e2f7873776eb747b5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.cd516a27.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJFCRA9TVsSAnZWagAA2A4QAKIRROpVUl4B1U49Q/te\nq+8sEuMGUzpl+FwMKHHGU6bP8KajPnUmOI8B50DlhuE6qEkTBCIXQODwjHsx\nxNSO/JpzP9MFUi+JMulnxmau/Rqj/1vBYKjM/WKk6RgFUSjkKMVmBilRP4Oe\nHkEBDkpzEuB/LkzS3idbnbI/JDCzV91lEDBrzYO5Fj6kRymEQrLYN+5zwBQ7\nErcOZmIdPZzA4JainB/0eyKEyCaDCLeaTbg8+Ys0BleBwa7fpMPhuTo6I1uo\nUb1Bf8XMNM+OGiLb8xZtonRpg0hfhHuzb5DSKtg3ureJ+YRtuYDm7FvN0qrr\nYGmr3MAvsr3ToWI3znTPgXnuWS4rTXlqeuv0ZOshxqk1BOh35dz0OIeRj/SE\nJclx3Mc3MG1a+UEYR+dwDXM2jl5zy+0Eg6QplXLUEGN/WPxr+sTVWbGCPs0M\nvKwDBtnqMN5nJdLoWb6hlYODud54gBZEszWnuKxsa3cB3/RcJKHaXecVncON\nbVFTSqFTX9jXHjY3CnVc6dkOwFaLdK3WYBfDXd1fQN6NsYyZz94087IyAU4H\nf6kLzBcGXng7ffYPsGVpjVH8oU9R79s7kSOazbaj4kuFnMVhw2VOYuWUgakA\na4wnsIrBn3paCOXvdJunE79yfkvv/uxxDoX+EyT00RHWV+tRc5K+qK2zjTlm\nNDMK\r\n=j9em\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnS2RRgomLd/yaQaOghthEPE1LmeBbK1SlDDZVyLsD7QIhAM/gko/0v005UxWjcyMJQpFp+zk00WuWkhiHXorSKfta"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.cd516a27.0_1595617860656_0.9726640441209233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.1f082191.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-ripple":"0.18.0-canary.1f082191.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vdzJuNZrZXguEbbRl/wCrqRwP6ugJF8GU3D7dzVcXeKxdHTMrwIrR3zuroa3SPGjvGW1b1uDUjx27z1d8T+JlQ==","shasum":"dd25afb9a670db729b2e3aa1303a0c0c1474241f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.1f082191.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOCCRA9TVsSAnZWagAAbS0QAJWl9q/ur6if97jrKQc0\ntkwsC/2U+m04kiCn5UoQi2Rox29Xlgf4VwMWO3aVS9fJj4y3ARoOsc0th4G2\nrKGyDlRE6WSzHFntBxGb6xTwmH0DjAbUXLIlG8CmbzNvuJkEH5V1f2IehOEQ\n6ZLPHyjDi578wxesC+7llbFHe6rAK4TGiRcGVOgIWt2WMZBLigDYS1PFON30\nYfgmuEV93bN9Bi+1zu3E03SYr0iBIiuqdfroZGa7eKq+N3NugmUfjXHTPNSO\norrCXqnOCwM1oOcw+5fpFOe+D8XljaYoKHehL4KIYJ63w/HjwX6gJd8mWUV/\npiclXp1FDaHdYpYMk8K/+4Lc7Gr8brEul/tFaJ1u9aRawswSOL06OCPV8ocl\ngiQxiiSPHdyN4F3LYm509iI9R6BjdxpsuGW7Ok30aAX3g5ZxwaiQLV1DfFRj\n0MKewXKXvgY8FUELpN2W1DlWnvO8QPPmyVy1CJE/gM5l5w8Z+haIp2hIaBxp\nyGIuAERNg2RQOcnvJX/fVgpatvbKDqxBjZE261M97l19tlcVtywOrNPy+rzr\n7OK/I/1MPTXrZkudNBnVQfWMfW3ASvRHldFQck086fZ8IdXFmlDY/o+2Jwhc\n0PLkPSxUqnJpooUiwGba+fmCX7IS25D13xzgR4fkzI3u/2eWzqFPbCk5uv4e\nXTw0\r\n=62Tm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnkDiYJrqhCIPX4F+AORp+kWmzzk0JZrD09W1uQn60KAiEAkXrgxg+apUwusVEXdgvWVTLYllH0YcNltYtbA/QEbRA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.1f082191.0_1595618178226_0.854250627775927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-ripple":"0.18.0-canary.ea3e82dc.0","@material/radio":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-t4Je83yXt+qhqemTLLUzHH9RyM0g3YGHqf1debvdmnKffZ2iiQq21Mg3qDRTNccwOFA55swmk8Y3T85RFMBB0Q==","shasum":"5a94b06f350f0f3c779ed868e2a51347559fc5a3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.ea3e82dc.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzS4CRA9TVsSAnZWagAAZNIP/R5NjDfr6Y3RK7uQkiCl\nVVl0XkCPIwZBgOYaxeX40zkCQlUxluXfKVcKRDSBLCAX+fuPZztND3e9ulGr\npqTeVyj9Hx4budedTcVQqqLt9cbodLFYGKV+lwkGsgoKuRP3Xd8VSo4CprUz\ngsEG+sdee90VL8LBfM48BKke4BjNEEfkxfOCzlXl8hbx9A60MOT+hSEwtCRP\n/9MZ2kGDM0ccE1DWuUsn6BZlChJAxxUt4bqsgahT04TihQv5GCVT4O3D7dIT\ny4Qe66Lfon2DKrtDVUS4x8I2N/RAK37OnxcIhfVthKqe9iTJYqj/1rBYw7Yx\nkIMpsD8X1f+eYNY+v1hnDeR7RVqdhDikAZtcH6z6YRFoF/yzy7eNF2nBozvm\nQiN9NqTgAvBU5UlUZHzaVHWNOjzG2/NPo6sUH3ATmjLz6AMkwizsrSaBVqJ1\n5tCKdLsWitytuICDv87xq3pztzifAg2eQ/GBwYn3R2CEH5wgcF7K8asNuWfa\n2gR7jtV249bmgzq5fzrZQ+U10mlLD92RqUC+LP7E9U8BNJjdnYBCLy9cbTKS\nzGoDjMzBds3vzK54+sBjavwxWwrTY9eCDtloi8QGWFDR6c8/MvfDTFBoAkGA\nxPu1Q3zyU4umjbaS/iP/bCSDKnfs9lv2sXW0nDVz2tYJi9TV7CPm6RFDaO07\n6VRO\r\n=A3Di\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGr5v786cfrAzoXQ19VY+XvWSdufskeJ7YLJua67IfgrAiEAoZReBKIXn1LtCKBZnMx7YUorwcnE95SofkCNxqVpG+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":"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-radio_0.18.0-canary.ea3e82dc.0_1595618488276_0.14035985068608192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.94987b64.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-ripple":"0.18.0-canary.94987b64.0","@material/radio":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EiaXy+EBbqpkjISSKUOiJLINx/CmlG9mZA/l4bzPXOdfjiXawumV/gnJejR6frIL5oVIeRJ820jaDSDL7VrGDQ==","shasum":"065418af5a7865e21ed61b3459a4af4831e8c9ec","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.94987b64.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QACRA9TVsSAnZWagAA/uMP/RQ2iZNufUKL/m8CoiLo\nPAmJhPM5DRld1NxT/lhrrXUaWagXzBBIXGb1y/1sfvae/1bu3BpCetbfjSyC\nw2TLgY76IvhYBUAYgUf4qpH3JksspyiU0ibQEoCEZhxLN+Lv27MDJIRUI797\nJWeqd9s2MIas91u5QMraoLfnGjfJKfY8poMG+kVwwjQw7dK7d3QFZRrFu/D2\nSs7kpbl1EmfxNh3iMDFAaVCYy8/aleOmCt/M+VOd036IHTnNXTrW3Pb7jsyt\ncHFPvCNEXFdJ6KGn73it5drFDFcmjwOzrwho6apdoUlL1bmM0gOWFRVhnuuj\nD2YZnbHnQPtxuHah5BGvYFSHPIvAPmmPpE+zXJ0cupj35zqO/YZ5u/xhY31R\nuFHm6FrQW/bbp3RdFSbDDf507fvY4+xi8AQr5zPwomGhz48Lu9jHvzbLdqUg\nmof5vNxT/8XBwyeYaEF3nwOtqGhD+pzD1Go6bZOC0ysFNQonFBy+yQHqtXlQ\nu7pW+rDqJBfvNRkEa70wdrfiktXMHRB1vI3BxGJHbL2v++lua3ZFjNzk4mFK\n6zk8KMP3fo2R3ziw7sXLLZRF+FI7zDtsF7AAbv8Jy5oll5owrQT6/WfEnGYC\nCfKt808Kw/4GPhhUbd557FkHy2D8wmn6VPpIak3NThOlxo07USvgW8BqL1IF\n/dPr\r\n=mS7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTRkpgmEwYZGQGpHt3WssNp7zJqSeP2wYyKFCyZI4gNgIgLCT+VOCZjfcak6yvnO7YufHFXSAxvfDVnqnKyR1ou8Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.94987b64.0_1595622399995_0.8511721028433821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-ripple":"0.18.0-canary.ff49b7e2.0","@material/radio":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-B+NMOFNmHxKPvTt2lFxVb2sZ9WoQRkZNPJmOX77eONGRU7cT1SD2/N3K4gR7fCQj+ouCz7JppXeIMydChluzWg==","shasum":"f24e4b451efd3cb86e5be68d568fdc882ad3f063","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.ff49b7e2.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVbCRA9TVsSAnZWagAAvSwQAKAKPbByVDFKoavCETS5\nsA/McE4Grnz0J2lRcSt4k+6jYGAj5Si9rOt91WzyY+VMKYkQlT4gsgU1RYPk\nzVLZMjBkTof7q9nGz4203O6qYk9jWghU4kOVp6eJHK8AGGyeBql5ZVpIGQwx\ntXVLtD1VHWr4YR7DKpsV5UV4ohl6qwRY1Z3EYveccWkHfch9P0okdJJdzEUu\n5VfahIZKL+JQqOp2aoSWb7rrVUPYPO5s0wR6De7VvvOtxZsl+0OIBPgwmw9m\nu12RgHpOCRZfSC1uK4FiVjH0aIN+ITPBH+ydQCLU6qoTNgD/fEpyu+rEMA27\nEwt6B5uVXi6JLqZ4ZFvqvS+GJ5d/8Dz9Guf0EUuCa4yhTMhILutB5hnEIX0D\ntvSNj0coKnipXPOmRQFVl3s599/lnUQETGiemGRk+Sktsvzt0Ru8bhhFfa8A\ndOnxZtXSg9NYh9TovhPOFsynq2MpF0SEGq12EeW6JuoJ1S+3oD8S33/DhGbH\nQ1R/qoejJ7MihXX97Xq/PCqOuZ4dosN8MVif/UyHkEL+QIo7VuGffH+0xWxG\nhPyFwuCKmbnarA1RgBCRl5xmAiSqptOgEGnOYSNLgOPWhtCbc9KL8TBjo+1R\nx8L+R5mBDSqXtvX5uqOh1LcgTkhgIXYvBsnMdo3epu7NpHeruT48oVHCxQb6\nRJHf\r\n=0Gvm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9ttXBlEj9SuN1TFPbemGrWa3BbObiCWmJ5V4nX0va6AiAtz7Z/0TpkHWKfBuzprHPLvMvMxelCVwD6JhW4NWWlIw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.ff49b7e2.0_1595876699171_0.49313853230298044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.3d334ccc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-ripple":"0.18.0-canary.3d334ccc.0","@material/radio":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wvedpO5xxhkKeksTIS1d3tZMdxCEw7L0iKv/A/rNxliuiq71CTvCPr3Rp//akDxR9I0QrKnVwuq3IxFc4Wkb8g==","shasum":"37f1966fc0494efbe2368fa8e250eb2b496248bf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.3d334ccc.0.tgz","fileCount":20,"unpackedSize":114880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8aCRA9TVsSAnZWagAAMmUP/0RC1AzHu4tEFgGRCQOK\nvCH+yHUGB2THM7s1VUIH1Ng+KwrO9tvFp7hSapGX6mvUupN6E7TdsEfRVOvg\nxFzgRslQ2PHlMBkVaAPa2XV++NwBx2aIC0U3aw0h76jhaYm1Re4bwJCF5RIc\nNaVp9mCw6MS02g6CmzhxKB2OPL7SoHHSVZGh0LVBLCqUEMCyppxddg2nTmzs\noC2N5AEt4jfBVlF12C6AXBk5FDwXOgrdMpGEIFgzT70kojHRUbCiKGqlWFHu\nZImrQdL5PlFHwCpXDGwqwIt+1XQA6W3gvSPX2Ove+71al/Hs/8YjddMK3Mrr\niITFQt3AnhlOIAa4Ud8TNr7J3/hamjZ87ScnaK3sHNjEXwV+B+8CTMk0h51r\nb/cz2IljnMpXf6wmmfqL7nErxIJP/g+sP8vVagSEkMTYjrOFWJocvIVl77Q1\nKjL3epfRae9i62lTWWBT54vQk22CTfCQo4SBA9Ee7bxfsOiurvnAughCr2l3\nQW7ZJAyBNijC3ZwvUr2SuUTqN8jZ6gsm+KuR4Vw98tly0ee3hz3k+8JOs0Sz\nfw3h37vNM3MLQPaKGu0rSrX4jEiiFpSnHGNdemw51vMWAUlUvNRBg2bxxkt3\nxM5BFd0aR70lycIjlcg/8aH/93etLz2K4aMmLSIzKrDurvgE+7p+9mFx7r4B\n/cK4\r\n=rSma\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjuxuiERExOQD6Y74yDyGOZRPWixL9LEwVUr8pYmsYNAiBL+5P/7R5HahQUTgUtDLZLicCUBXrgHgwBjA9OKT6hKg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.3d334ccc.0_1595952922245_0.5004081137744731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.82ac569e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-ripple":"0.18.0-canary.82ac569e.0","@material/radio":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-N/X8P6Smi8x5L2TbQBKFnjV0bihDImtLqllUQZ2eAayBo99b8OWT9qJAwnabZsTi6WiPiGlzF2vVxZkClDABpQ==","shasum":"841cc7cc72e4546f8b33a2e9de0e52a4815d4c3d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.82ac569e.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGcCRA9TVsSAnZWagAA9SAP/2gPXmPnTXnDsmltJhgN\nv7YLBfus3iZA5jTxrEjRRSk1dacaQFnnwSrys9FbzH4SqmJKLzh0uh90lS9R\nzHLjxNzJJQZVkcRhCimEfdd4UNesAtR7xRbd0mijs8+akGJP1OlYLOoh+oLr\n3ravrQcEklA5TDOVBM9s9J2fN/z6QmwwkDhqYF+vywxgSCftK3FenkjCUD4g\n9gb+wqspb8dCXDmtMfvE0EQbIBdS4WopOV03tA7BvKE0mSR1ouo2KUojgyGI\nr0dpUJ0ucVmXa9MUedudGij4rlqaXFjONzyteuRiUQQjXG8meGJP/kDeSRLj\nNibNsAQOz3Jfb+OB/E0GIYsUr/kjAxJ0TUYcfad3Y6aCJ1UocrrRzj7Zp4Va\nTxkUVhBhuRLyfPK9b8IBz5LEzzn1TF2PWwLxHNsHN478EIZ+Zv6tUutbSNsD\nkmblAWBnOib0NkmUSP2YE0ZSyGBlXg8DgZFLBOPhNXGwCxYw7TIgtpuWDV8K\n5XL2rlBvEPvnsaSwBFgCGvCrsWF0TJVuUanUXZiOAjkUuNLIqpeMZWHneNEA\nl0Imaminoshj9IUirz68XOmBpuAjRuFVouPl3KENTw2WK57wRO+eremH8L9l\ntDwrbsWH3Thd1g74j9aMf6c0yBWn421C4OkyM9CCMXd9vPO3soqilFIezGsc\nVACi\r\n=DLFW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXmhYqdVMa7Jb4MZUWvJHrpqDSmv86jC1AvloCksTfXAiEAg9X83poJcpNjWrwMZv3DU7ZOaxyCJL0UAzprhj8d6YE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.82ac569e.0_1595961755766_0.434913739300439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.99df7397.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-ripple":"0.18.0-canary.99df7397.0","@material/radio":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6bdUO+KML7EkY6RbTBYdxFIpu0WqBLCdEYsOQkpOVKNgXNBnERsAwyejq8dTMqCmHZBRZR9MdL0qsEau8tsNcg==","shasum":"d2b5a4bf2f8feb876ff95962cd00813df0f49fec","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.99df7397.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGsCRA9TVsSAnZWagAAHMQP/1PPjfN3LlF4ToM8lGEn\nat/vbCugBWOEn/+fBQdjsx7OebZmtulPXGSxq7JGKnY/Lkkto19M1qTojc7V\nmCTRlTK50Zh8HJaEA7f7LQVRq+10RaVpbnn8z6+gmzvHWSK2yHwzaUbKFCuf\nORbH217gbcpFBgJeAECES1n/kbpTiv62m0bwce4RfODPGV6PBXCkaD1bVfdn\nNbsZRLrUY/ZSl6E1uOv5oxbqdP2+gnsAvr1IAuaLLpvi613xhTajZu3Ww4FY\ndhpWKZxOLVztTT40e7R6ZY9yIAsuUIEcZk1Bn0lRbJ9Eq0FKvv7OznpiAqTz\n2Mau9xNipT/9vHO1jJ/0JJLbC9HZuY2ikVREfOq02GCuHKgrCGIO8LEUPQ6t\nezQQV3avMEDepTvCLb3+z0t47rHSV/nFxCaKKRPmHLUyheA+SmLVKyskkzWJ\nxxuF318m+Hi6CmVsqDPLgwQ/Eh14AjeSiMLwXDHyCwAizAKWFgA5q2zjshHZ\nroEJNPMsXPQPHnCSEvF1oEUS8Lpa+lGAmaIwhX2bGpaIYO9FqkUAw7QS6eBq\n6zfcBR1TzVoD9k/p+eKTGe6c2S4eYb5FcmxPKQ0g/dMeTR8HjdmDH7v7K/Ay\nbcDceTt1ndw0iWG2+DalHfVEzTAfFXhp+fQd5Juy2k6YQl38QDcUMNHC3UEN\nke59\r\n=HZCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHXH6uE8ADhdrWr7x6mwky7gUDkwobmDXXugRaoBUAyUAiB6wukfciQF+fLNYfB/YnSx2SCmVplIOa2mKSY9ZMokqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.99df7397.0_1595990444044_0.1687662050742358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.45493e05.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-ripple":"0.18.0-canary.45493e05.0","@material/radio":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QXnnyydptxoTrG+ftiBTeAGWAo0EP180II/P3jIXCDrNVoD7sf1SCI8vwHgQ/tulqwdZYvYTbwNDp9NtgoC1zQ==","shasum":"9474ebde952359044ef34c67188403a17a9f0bcb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.45493e05.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7+CRA9TVsSAnZWagAAfcMQAJ+lrUKd5TQUmvXIEIZe\nBzkpKOC5PofM7YzMcBdbVSffu25+ob0rM5kcG9NQy/GSXG8I7aMxVAb9QKIL\nyI/LUf8K6nz1r5nesPH5LvfaikpArXlVJnBfGlsFKG25HMkoZNFqvoM021/F\nz1nsuW2/41ng026+Epne3IrvjnDwyIoI3cocyxATRCDmjDoMvuyUyhMUr6T1\ntRysux+CcrDzvX2SUTj2Xilv3a1cbbzVbjqZvPzhdsjv4OgiRo5QMNs/gY8x\n0BBjIWpfhkoGv4TjDdRDgd4yfnh4Xvr4pD9l840LOOnNlTYE9mNmZpFAa1NE\no4ITxVY6/byePGpD10trIU7dxG31TcqBidDPYaq8q/LHVHVhyVYHkmtSwsXR\nnrojHWnVIIjIFkcGG/Gy0APUNigYAHVHMmH13qmaE4vlAqhrmRQX21oGR3yR\nOfx37VRU31ZWVdVJE9LVfFw7MZAFiPBBXU0QUGTKiT9fjJL7uojwDmLpbWN3\n5rj+eGiiTxkJX8aFc761x5uLYoGxqzmaYSI0uoKjRboyoqyZbQpujy5s6quK\nC05eBb4D2N0sYHKmZEEgzODvZMoEgXcdYNynAnH+kdoyJ3gdcibXWQohCUnt\nv+b97XgVfbYLPPxR4eOFnKo3TmKsm6fZ4aZwug+rhm1PKb577NMBCWUEdMyx\nWK8k\r\n=bM7m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2rnEt9uHRS+c9ukTdo+roHRFFKYAfWrefDtsylDFwJQIgZ94HuPHr/9ecWZzNdDm5kcnwDSd0I3ktYgdHG7c26lg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.45493e05.0_1596043005837_0.9734506777273628"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-ripple":"0.18.0-canary.f2ab0a95.0","@material/radio":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Pl2dflBXfI6x4Fo6xOJbUw+5zfwhMbcElA/2hWo8tWuLwrzTV5nY6GBWWSL8Uc1sf92hnza+x3l1Jr5/DboA7w==","shasum":"b1b8fb5c6089bd6744c7cd4d1859a8b428cbc1bd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.f2ab0a95.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAiCRA9TVsSAnZWagAAyQMP/jOR8sfr7GSTrMWTVe3S\nqVYHTLaZsqCa2FZjiBJvmgJ0X31h/rOfJHrirJjW0Mk+oNu4gwww3iOQCe4N\nkRsyIzS/SDAWaKaWwK6LnHmONhmonPCVKhPhrIdG9vkLDsWWcPA7+pDqxWlk\nxhV9PHh/dQkPJnvQAyiroQP0rVX4m4DcMWkTOsMdhzUhusyRHQnuJXWqHMxo\nI9Bhi9koWR1/I/I45H7+vRqW3o79Vz1Rhzw48MWXYO7FJQOEcMwIw+fdxZyt\nvJ/2vOpjL8OApUM7sh9opeZMHWK8aPXeOFTinwyIA+pelJQl/Md8KRYL33/r\ne9HEWYMvifotB+x3xQfW/IgfvyHCEvYNQLZXGz6IX5FNBL0Svw9sy5Mxi8Eo\nfBX3QkBz5XbaYZlO4DnkV5ZjqpxdWiockfGcNDbAwhFS5oHFQowZ1b+RYAsO\nqsTi5Y3QFbckG0ke0dVhYrvA3QB7m7i9pWOIJTzOcvpPlWz2oyXQm5eCcU3a\nT2OvHHWupfUBr55RWyqv/yQQTV2R1vFrDqfQfZIoelDXp3oLNny1I/NM+1fS\nW00eAaGMjGLiTJIudHhy4m5N4pksvOpsn6Rry0yFz1HaWXjXe1BwyRgSqcxb\nRBUF4Vd+QlnEqUOhkQj0GzfeNYc8F6pNJDvx90LE69aFQi/zPIHFw076IFtR\nuIXe\r\n=K3qY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC10XwHqShdf0o/8sqrJY0d9KFU9UG+B2YJQDKz1tPwXgIhAPUm+mCdGafvQFoG/2qWnAaJViHm/vhRvnxSWEZ9GiJo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.f2ab0a95.0_1596043298231_0.09772100885088686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.45f9eddc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-ripple":"0.18.0-canary.45f9eddc.0","@material/radio":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JARlFehLu6bkiMugZY3SjpPoMyEeg4hVePE38fYLo0ucvOLSwsKm3h0P7BtP7a8gBrnCKzUF7GJ3MMbbQFhhxA==","shasum":"f8fe4de2dd431563bc8762d32daeaf479d96e170","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.45f9eddc.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhplCRA9TVsSAnZWagAAbyoP/04sjHN1VymwQ3t6zr0d\nqcgTE+f63UqtQGXNP1k2Wm7B3xk/5Qs1Ma/Pkc89YUkHq2ULVlzb916bK48G\ni71l7AtRIiVGWK/E8aDfGOSZvz7vNzAuoiHgQ4xzucrXR2KUr87DByoiq+9e\nsUNL8d6dJJ7TCnVuA0yro8fqEOzG5e/KByY4cMJmDThnqWu0+rqMS563UKXi\ns9y/iMH08zsrMzJf6U3DJR6YMTfe7ovZsCnTAIEs/ghC+zir+N2oMqxb+/vm\nAMXGLr2YAOu2mQzO/PPur3Nxnqw99DuUxXRnwtI2QbPiKa6EZ0xIUFEXnaAE\nfKv5AY9+CcFR77FeG8Q9NiMuZNzHN3LzOI6pYntofLRLNvTYA0JfjdRPvvCg\n1slZ5lE0DJx9lGuUBAh6DQKqOLJYGeXtjepoXrgxshyyrijUV0KXNXvK+EM7\nc/d4K96MgZ9GbZjBiGsvPtVl+aAVdf6Ppxx9xbIbQmGk5a6SvH3So3nzHI2W\nxiYz9qiOYEClYFFTIZAhKXNTTMJ/MZrURDAVieFznZTmfJZru9YU4FJys2PQ\n5QG27Y8sqy2cbCQ1MnCLzKFu+6CPmmWvJlgKf3Lg93I7cNI0yd/vCK9E33mh\n49+iA3z9h1pmJ1BDALF+7cs4+WjJcy98xhUW+fiFfB7tWWR9cpSUz28/OpZ4\nJ5A6\r\n=kFZO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRjUs0tQtHG09mnDxYK21Eq4qO6MMSjE9bTDvRCXVlwAiA6ZgxuQcjjNiWJCnUMjaZN/6ckX1MOx3GA7rETFYmpcw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.45f9eddc.0_1596070500869_0.054739456111137175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.b64663ea.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-ripple":"0.18.0-canary.b64663ea.0","@material/radio":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tcgKSDrkvweLn23rXYPAYQ6scYC7bsUb1THlXAeMM0JIV3MB8Rk8topcF+EGwAbonL/gwVrel2QONIV6J2eLZg==","shasum":"daabcce184b929dee4e75b870c904e3000c86467","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.b64663ea.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwa5CRA9TVsSAnZWagAAR5gQAKDVCH+ezk2beIbWik84\nCSJFMc02oyALT//il605viTH48wSgZi0QfmO4bXUflSEqPRQR7SNmPdRYAnK\nzNFiKFBt8nXiZORSz26qV6s+E6rTbNislipUaCKkEzdi3unFa0jAjBOwqJq+\n8C5QG7OxZnUw5kvDFYe0QNML1DOBx8A4gPfYnEvqkIRJGqCygEMEJ+wZ9Sa+\nXTn7g1CLGlX2GTBhJFHl8mInIiBVRfOYBGwdTQJmQejQdPXGrUOQ7Z9GIULC\nc5pj9UWG9EzDWNDKWuuBuNXVIfPmi/ka1P0aNAs8GIkiNIbT77Ol9KijpE4T\nKxYfMEHBIRm6yOtlzHq+3M0k7XBVxha4PUyb8tcSH1XyMTA/QujbHAIFA5vi\n7Ni8HubHJ/dvqpnW+loAq9ia1ke2nYfXWM/vnbKSS60ITVTiKV3N2pVSwzco\nY3e/uF+cIEgnNCdWBJrinoYwoAZx+Nt/qO/HnrMOPZWo8C/MvZjD2WBDDGng\nzAXUYht/MYkfyDeGEpmyA0IxZmy3sYTjaVCOArTtha+jwxTRFx4aEpGqI///\nE00mrsELAlWXFBHf2E4h4HNoBHTsq9Cb40sCcREpmWkuu3YQv65hmlOWXXRc\nTFwjMiOS31ehXIRG6AYKQBMBMaLC0+zcQysAFvIS4RyuEjXY2XRCfTINh/pu\nq5Ma\r\n=56pB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/bA1hAPPwI7rwoG64eYTf9zuO69QcCfSGF+oN5B1+jQIhALFeSh9tkoFoPMLiKig1/RyB+bLI19gk9lsEoXbIdhA2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.b64663ea.0_1596131000764_0.24965974065644536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-ripple":"0.18.0-canary.9a1a4d2d.0","@material/radio":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KPa9RtAqShg7X3ajQgCAVQCFriLtL9/THUwW/TpXHcvxbrMlozX6CRZMC16PZaSRD7TfkZp7D7OB6RnFj6ZL0g==","shasum":"5cc40e8d3364e138e0abf2e9016416358190cfb8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXXCRA9TVsSAnZWagAA9qEP/0X/aGDGTq0l8EqFffLW\ncaGoUqSz4AhVk/BmhoiB5VSItoK16fQHrJNniDizMI2TidK0wMBO3zJG7Bmr\nLochumDZFfu01ZPPXo4tXp4p3eAuSdqaaVYYPAUuP+D7tinI1F/MFgpWD2ua\nduwC+q4WUUnJdq1y5iT3ct6rNU9ZpaIiFlmstMWHDuNFKBKcsllxndczDryR\nvZKO/0jZJ8zs1P5/0FzQY8efjt3NM8d0+gAbYlNydg0og3h0/cr/U10p3oqe\ndsPxH6lPI0hErWZkcTCasLuTci3M+l1GTyWhLJjo9Er6XkQIk+OSIjiGnHk0\n0BjGVUKgxULfr3/8K0fTHeirHupJ23Qf7OX/jDXSrZo2+tnabazX5UycwVVa\n6KTdmjmM1rORMUCc02gGLOVeIfPsdEDVfBWkqT2ml4LZThb9w/NjUXOtE15t\njfHh547C7Sn2jrcYRZJ6Q6A4vIA40xPMBP5wvhKnOPIA4brEOk6tx44ADjaE\nBGLPOBty9yjpa4VhXmL4qrjR9BykY9/FGOuqXQr2VclDpElH+9lrLFvv/zic\noqZJytoXF7ZI5LPqFUu1QadT1F5JZ3lA/zaMT3lfaw/pNXX26pTyZ3ckjKEn\nwGwqsfn+0JJKoRQ3VzjndtuM56FPXfjVdir7i06TSsfiy9ndl4RxzbZMKWCc\nF1ny\r\n=6DT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1SkIIUWc4dn+ohHvnsODNJFZ/ReDTy0GyDB6Kf0qXmAiEAzUNCIpU+Vp1YXk4XSZRZvA4UV3GKJf8pCpwwd/TmJqw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.9a1a4d2d.0_1596143062494_0.463933393899997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.887c2848.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-ripple":"0.18.0-canary.887c2848.0","@material/radio":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-youOFls0uUjXctGTD3+c/8p+HAOSshfJPOgbzV//hljjuK4ofJ8C8dUdSzpNOQHO2ArKxu2dsXjWJmElsWWqVw==","shasum":"2c6ac4c2ada90db9612246890b10900dbdd4e5a4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.887c2848.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0Q5CRA9TVsSAnZWagAAjJsP/R5zr2ddndmsHXqvWB/u\nfp1GLdZnl3+3v3bpE22BUoZDSy5AmeyvYsNcC+imMYsLc9gwMM65IhUzYcBi\noKQBCLzj0xNpHPfaid0+JySfGfefuNCMJ5RR2s7K7t1J3fIuVI4ARrwti3uj\nV6m0TWyItUFsvlL9xSTZZ8pI8AhMzwzLt8TxviEOd+rpkMhermAbJ+ZZr3w1\nIJsjM8jLU/JyGX5Rc387r6mRyo+3k36XFDU+fIYguM7Snwh/Plyj0UHEIiLd\nXJvQLY4Ckms9267k8iEhmhKNH+zbtlv+6B/e4w63xAXcM7OCChzcK/AVctLo\nkKaFNKWh/JqKv0oWCO+K7JT52FYzk4j+zueSsVABIsJhBWV8LIG9wY2EuwH7\nNyvvBp+GotDMIC7M/uGZr+jB7a+wAqkWkUcMH6XzQRSo7O+es1Sr93tQkkd/\nqv4zGbJJpYV9KVuuieOdrusVeEPoy9QFsWaqLw8ZdNh/7844yyRaW5Vc+Xkg\nQd45uU1i42iXWKG7Fr99Byh9XkpaBGFJHcoQwAmqeqfs0k6C8aZg0SV/iLnF\n/0gSMin9GnOokHYpH+U4J3FltO49PIeI73pQvM8LKrH7qUWnYWzqw+4ZVnM4\nh4mGI9zZdBmfCy9CHeMrkEOqjcf0irMddxkheMpsqmOuv5WhsiYStteOF1ma\nqXEZ\r\n=VHiL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdvpbooEp2FKMLBvA7t7C+0oS1Ps7+EeV4smjiEnub8AiBfNVZXKsXTDTKS6h2C97DM6+ztxGyY3w3jgjkynOZXfw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.887c2848.0_1596146745139_0.3232389596212286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.354eb695.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-ripple":"0.18.0-canary.354eb695.0","@material/radio":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-A3WLQmiC49ADNu4pDYA3/xm/UK9/QsqXTmNbUASrszWpX3vlw6wtaR3U+XPIF3oiA8HqxAF8E5FV8l1nQ1KA4Q==","shasum":"ba5e4a6b4b2802b0e9491bc55a3fd06ac560b5df","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.354eb695.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16LCRA9TVsSAnZWagAAHZgQAJ1n2mOSetOoic2MtXyr\niLclgDU0D0cKYgR1avDKAt5aA6bZfLlmv3jQdAMBZQKtfRvYNyz/KrRemgtT\nO1iV45tk5hK/JwGFbrTv69UuyxySToivAURv201aFYHdJa+hZq6ZamBojcnR\numJ4hy1DKXf+gE9rxHy9pyd/FU5m0YJLJBtR2zpBni5YfKGMr68PzGFLesPN\nYQYdtuDOkY4KBlwmVFSmdIeXoYTmL5J6fCohlpCYYsXOWvSTgaglEee/+1op\nB5V2M7Q87e8cJHjrEXyBf69s66OKYKyyPNMK3gdTD5qqwi2xARNctdwfuX3o\nEVqntiWI4W5ZsQtd3Z4q+a/XlKVSPy+x4d1ydZrogSpAdErKR5Z8OVa0k4Qy\nkuXxrpsoqqikDpXR1u/mvhZOJ4j9KH3kxr+I2nL0m8Jj2ebqHIVp/Ad/LBCs\nrop1Yse3Ua2Pq7fhIeBhG89K7kh5Rxb7U38Z+mpX8L3Pfd4tK9x08mr9B72s\nbZASzBPSgCJYM3dlp5EFFuw5rhs6EXULsWbmm0Ozj5pDGjf9XR3+NfEdqphv\n2+2ed5uZ0JUqbn8ywLD29GDoi1OqwLEiS10QQUIjzn86zvzVWT8K6EkItUqP\n9EVDAYi3uuJ87O2vF0Smm3exngMET+GayRgWP0aN6AW3JUs0zCRgmhtAVKRC\n2628\r\n=TB5E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD90lI7bQl/VqjWJde4OXgm3G4TSvbBRW7I3pnUxtDmpgIhALfMDz1JIBiomhd17qWU9WWOcdWf911dWoGNbbkOvTMd"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.354eb695.0_1596153483012_0.4090135297563897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.7beb236c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-ripple":"0.18.0-canary.7beb236c.0","@material/radio":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2ufE61xYHKslS/GrENNmImrKyK9aKaYe+I6HhUbEEBPsNgmRvSp9/+waqnj/KuTxg0EYfAhpCmgYRINYCICeIA==","shasum":"bc9c3da8d91694ac598341414b51ab42788e5a5a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.7beb236c.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeZCRA9TVsSAnZWagAASncQAJtYh5/WHdPD50Js1pMo\n1GrAU+mzGee+eGeGBtqenXvRZTDAZ3xzt09G96FJ0xw2STq6b5d/kdGuSYuj\nGk7xeUAUNOQPPOmn2qZel5/zS0kGqr8GifF1jgyZM83P7jkLgmqBNO5cDWQy\nHiy4rj+VSrdpEjiVWDXhiVC8eSXqtBN7YMxupEIWh+8HLOxX2Vjo/cuKyrPi\nchis+SLrxJlGG4t+7fyCXnvvhXalgWYkD/vfVgvPvXO1LDsXgr34OLv6kAlz\n8TxXiAuljJDtORWS1P4U75NZqnPFup5F25GWgyY6ZoHFLgHeBdNyjR7Bf1s6\nU5DI5ZwtsLWhogF6yPkWCPYz6wtmQh1e19J3O/LSZEY06wpOqENOPG9GG4y4\nH2I4Y/QKU5ACHK6wUS5x5CpZkjfsUXfPe67Z3MCAPuK79TzeAqAtlRF4RpqP\nA9Nl3tgoEmG88IC8wuQQXXIlUDBaXSWLjojN8uXjXohdjmq4//1YxAD3SDrI\nLtGV6eBbD9Sjbevz2u7J8oJgB44zdkpHo4NDesd2TNQuiEMgKqwQ7zVyffPX\nbwtQWqZCJkszcnNi1EYoWIaSJ6KiF9cy8ZPaj6OrCq9Nd+Z/s2mvKJ3xVO3J\n/H080EO1gkUeYYJoJOMv2b2pJq2NjQszCjzDWusMcEQyBgji7f7wrgfWhC75\nlhm9\r\n=nXQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDP7zD5LdabnuQLaTa5jDF6m+6203p4zpr4nmTCeXF7AQIgagZEFI6LneNFsUwqG0qNOGdn2evx+jEmq5axac+s9S8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.7beb236c.0_1596217241283_0.7918916810343541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.c44acc0c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-ripple":"0.18.0-canary.c44acc0c.0","@material/radio":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-W3lEEBDFChgWaxOPMg7sZRlf0DrKuqV9hbWuMw+wbZmGX7PZDMVtYsqYgCQ3P04eYwImAVgPreLhQJ2swxWuGQ==","shasum":"95d63b274e351fa6723e06f7476948556014cdfc","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.c44acc0c.0.tgz","fileCount":20,"unpackedSize":114970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIj1CRA9TVsSAnZWagAAQgwP/jNIPJ0EYjISIcCIiJto\nmvgYqsuLAU7AvPhbbQSMIKyzg3p+ncvW5Hsjk0pwjPXayj9/3oDA0yOIP/+x\n/DM4VnSUIUi+e6HcK/N1Gsok2lf1dRy08384Nj5eg6p9AMY72ZLBbU5D8L7U\n7ImQ1yY4wlO844EVaNsh1QEfejO8vFJMMxJEfH5NljwMtOsXu4TKe1w5mkDu\nEktQGpXTgdXrdOEX5kMIEWUsIZXnoDS6gD2PkMOF3ClvCJy5eN8kWp3oAC9i\nDw68B9WduDnpcqecbFCmesDMQJUsoW7Yer3jCij1sL4OJ4O34a8mSHg+P84Q\n/mDHmD/o3p6auJuJrvdq6DnmOIcme1koCo+fcEh22S2EDsuaglapGhZVJ7sQ\ng1ehQu+kojVRuKvzHH6eX/PhQiMtOOlBjPOPRGuoWmtS81AXk+1cW1ogxY6k\nsftrU9Kdu+RJmBi61UpWP9kK7y1hTi5LWzghjxzl029p4J8xUBMu0RBPObNW\nd5jlfmBI1ahYGG8pXEm2G0UkAe/5xL02mdO2NVPE99wzhcS3UeN3TCnD++ii\nrR/gZpgcBtaNdVH6Hp14NRSKxA6srge7K3KClOXeCSpqXdOGDJcVrm72O33c\nW6HDiqW0BttpsqEsrdOUETcpxyszFmgCuEUXpPDSAgmlpaCONgxE88iI47uR\n9LiB\r\n=btE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZeIMiQfp9ZnTDR436DjfWoXC/N15FwEwQSPphBY1o0AiEAnHOMOis0rl8SabA/6SDb3ubrq7C8od8sYu2wdgxFXPg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.c44acc0c.0_1596229877335_0.4995208406025924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.779853ff.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-ripple":"0.18.0-canary.779853ff.0","@material/radio":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QJsZ5KU4JrcUTMPUQ37BuRVsJHiIIViR1yx6zhU38qJU0LVXoj4V+GO8aOEJon/OVzh3LB5sVsm22XXJn1hnQw==","shasum":"c809ece0c7bd1a3b0334abdd7e744c151701fb6d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.779853ff.0.tgz","fileCount":20,"unpackedSize":114996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgYCRA9TVsSAnZWagAA2bMQAIes0RyGaIs/nY7dDi0G\nQp8MNoFmDlnjI66y4oi5hoCRV327o8IbMZbPzW8UX8FhUQilfXFZl3zwS6Bc\nUK27UuJzGpLem1Gd4tpkW9JhpwZVDRdkyVncbL8EaSRJS/981b9Y7qW17f5I\nfpSui8ad3fK212jSgLftBmc+CC273lwi2Qao0F1ip6Y4hVPkGRGTPGvrPZqq\nJIJ2ATGl/Bp3hHmw3BESOau3gYDeDTVOVNFJij9/6sfhlanj4M/Ex7Uvx7cS\nYp1BN5GALztG8Eb0SeqcktzbgtP6dpd58jvAULxLWRwkrlpxwBQMSSM5OKgD\neIwbhdm3iDELMNzUaz3Jw1odRjpDruY4cfKN4TIA3a35g6r3uasdZPjnS2Kx\nSud/jh8MZTuVXEmFemoiIDA8znRtWXdK7brXpzssPC9AooWdzkAQ2T7P1opc\n6joQnnEoa+goG5kyW7N7Rkl3Vp+j7IM8CiRoeTn6WvjAlyrKeRJL2nOg3XJd\nqBVTCzWe47Aw43n77e4/PKiTUxQhMyhQuYcKVzb7Odimnpldg70Id8r2OFAp\nY5ut7Imftv0NhnCE/wG+Cp68NIUCLh4grgoCYsv5wWNySowtt5dz3l3IXCmE\nnK54YxZqaHIScGlV0iqJf+LkQ9GCvhj48cjT5MQTYEL3G3JE9MisyckTMqgu\nveG2\r\n=uj8h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC013MXQ5jA+S89DxMx01MPCzonIuwJGlB8QrwjefZ3CAiEA1H9wVjYQxtAx3WgdgJ0rNT05+NTsKOLhkE+pfQzMFXU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.779853ff.0_1596475415768_0.8147593032359282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.8aaf270b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-ripple":"0.18.0-canary.8aaf270b.0","@material/radio":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.74839da7b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YNFAX0cDvdNYtUk8sa/A6mlUkxQQN1fdPzGtzkdgF9OTf0y8lBfnQJ8ObO0bvnuz7rjuMF4y7U/PZwuNiY8FOw==","shasum":"4b0cd4ded865cac00385545db67bc265d986bec1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.8aaf270b.0.tgz","fileCount":20,"unpackedSize":114996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFo0CRA9TVsSAnZWagAA4a4P/jYc2TQVGckvOY7eTdkJ\nMdFCffhLnwfPU8V5/diDIWi24F5VD9csTAiIT0e00EziMck5fZarAFANIi3Z\nUpzGfwa3JGRwxuxPlkn6jTVNx+lyIAm9iRON9cAoOMRFeM57kCmuWqS/XQSd\nbr8QXoHXozW5yoMl+smIAJTQ1MK8Db6YW9pWNsdVMHLSn4eeX4fhwj9FXrcm\nRppV6Rfs6dSp72YE/j76GU3tFsDoPv6RsJT3si5FFQUvFJfHz+8MMw56qbKp\n3wEsJW6ucUtwbt8Pt7RX2K+jw+XgqylAsojfy4HNE7sB3kuf5DbT33qgI7/t\nU4XnakcZtMzq1WK6/ssmYGCTjUhxCsjeBJHdJxFDAIhHmneNhPSZuP+SYgJK\nz2km6rJ3uYWmgbbsmq1q6SSBjsYu0UlX0jW4sWJx61zaz6lql4u00/sAEk4Y\nrOYIWjKEPfk7H0UyHSkwrBQzw0CooE5VlesaqmDzBqFyiOP33hUYPhuWhxKI\nJr1iTRmdK2IwI9KJdLd5ncjXjBX1ki8ouQ4j6usTcQZYD/DVqcykXa2VimQp\nigZTmoDd4x3kik85rHajODRlmf41rAtlTWtX02CrOtvJ23XQan58pmWIJ4jl\n+TFeJPg8YJpP8Bcxf+vTO1FERRl9IeOB8Eyg6PcwZgl39Cozs6EgUj+CWEew\nxdQq\r\n=Me94\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/+iSN9oxWorRG1gHo9l5gcY5fS+YBNsIpasLr0uw02AIhAPT8VOxlf2WT17BAtHnGZnm6+7xpcnh5qsPVRBUfQbvC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.8aaf270b.0_1596480051837_0.11913590254987061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.5cde9f12.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-ripple":"0.18.0-canary.5cde9f12.0","@material/radio":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.5903d39af.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Lo2qbtcqBhVz2Yv2gzUEDF+qA315ZcdsHMen6oIV3JeJvoJm206c+WTN1ze/2qOQa8iop36WJkCqYAT7IcM7wQ==","shasum":"25399b65c4e1dd1bf150d61caf3ba1d281158239","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.5cde9f12.0.tgz","fileCount":20,"unpackedSize":114996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7+CRA9TVsSAnZWagAAcCAP/RWd8DHDnx/Pf8PPDlHL\nPyfpHdpSsjJ/2JBImuqvCIVq9TMwSdbCQiN2xt5saPSoSxMmHZYd3pPUzi5J\n5FMRoq//iDoDMHavSdj54bZyzppBA46CMvbOhzSTNyhTvCrXbpw/cRn9xcrn\nwQRcRYxzOJma742YRirYGsy3gDs3E0WLwxBHUUJzKmTZmao3bkL2qDr0UENb\nlKibj8YHEO+VWVosZMDv7rtelCz/yibFen0JqxUGCnvscoekSm1VmxffnndO\n19i+Cv82vx0jaYhfPqcTSDUQMCn9sSXbIdEF1VV/Ffd55ildB+dSbhTk2L1a\n+D2ECoJyxl17E0AxzaujwQmATi48uxWMHTkRK59r3WPISicJH2Y2Icgvk4sH\nFNQcGnuJuzfecbOMyCM1sO2pSUsQMDN4osrwQvJhUjv6bkW3KYlev0dSqHX7\n79Usd7wiStPmmw+BDEicFAzwGQHvM2JmABTPpKZhpvQwEH05h4xB95gpo9Uk\n3NWw4zKSZ1LXzFwuLiD/zASGe6Z9NfrBhpu8DfjMNY84ZJ6qDCJ94N9PyzCE\nLxU/7EcgeETkSOraSMqEkqbASYnfSXyvU1ESGGOFJ15v3n16h5SZLnjXVQXQ\nXYIJv7ju51bHAJWfnMQ+lDwjaxzLAtuDZm9g33WUqDPgKN8IeMECW2kP6kV9\nVhaz\r\n=Z833\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5hcnH7zhGlhQqf+kfszG1QcUwkzCNEyuvKlheqmVI6AiEArRHwGtOJb2VnizBJ43MluT+Odopki3upBL41hBJ+GXM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.5cde9f12.0_1596481277997_0.29652390945593976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.1607ec53.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-ripple":"0.18.0-canary.1607ec53.0","@material/radio":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-x+zXPMqXbDRDHvBEE9TzMrWosOaqLU0xGfivHQLYk6wBA4+FV4zXTftVF1fXvQcv95AFmE5Cg6PPWwc/jRXNxg==","shasum":"471ef34c0cf7a4027fcc831a31ef4f989b1e4177","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.1607ec53.0.tgz","fileCount":20,"unpackedSize":114996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmtCRA9TVsSAnZWagAA+psP/Rj5fHgpIBt5jj/vouyd\nzumQFa/tgqAHAVR9ok3BRr6ue4IuWBQ4/3wSWYG2O664EhGdyWy+FICBEn6/\n502uxHAgBbnNHzNLhXkLfDY0F4Ve0qZHYn5w4Xrn+1SCD/h6sqOE9jLZmHL1\ntVS3KiO5my78L/if/9dHeH6pMJHfvL7COHsFlPHXx0g8IFzsxiuMC26PegCC\nbjZJ2Q4AplwF8j7OuApoCeDS1NLg0fzYecdoUyAqvwpVHSNNNSMlH2wLk++M\nfhSelCht3ktb1PgxNsm60Pisd/LaR+0y+1HkhhKsf0nM1Sp697kcKqYs+7ou\nhgoGPZOa484hgBnd6TMJmo6ITgH4FDFGhWGVN5UX35UY2/VMv9TOo7qqGX29\n3sVZGqDkpdn60tAKeul12YfEAkV0e+ynqgzSfWuyr71VjfAiCQlSuOOBsaOl\nowtcYJR/pYiq0G+4XDU+QJR0M261B5VhXn3+5AOe5xDOtiE3fJr77d4RF8Lq\n8T9LSPUA2uQ29z4rcrYz3RW5mqf9Up4Bkdv6ekU/eDAbH3/IvkB7D0mgyN12\n/mBZ0/dvQLHTp58FEPRdheKd7jIccPXRrPhOF3/CbChje6lsbUEUrLIxan3l\nXjovczj29ESPLodoTW0hrVkiyNjRMl5PmCQW2ZrQcuvMnnNHHRWbCGmSCmRv\nMVmz\r\n=kuOU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlWWOLE8zKQntbq87euj2AD4QFq3YqCbmeILAwqHIt7AiEA8fpa3MI6oTWJFeq3v8hdgn416B3Fz7bCuQSzJQm48gw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.1607ec53.0_1596484012862_0.7129018746758515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.678b30e3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-ripple":"0.18.0-canary.678b30e3.0","@material/radio":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nUE6xHyLU9Nh/kgh6DAln4atW/tUJAYDfR/KIQlA2JQ7smkVI3U87i4Yo6VVTt9NPLaBAqnbIDvCdOgiQWtmNA==","shasum":"12df50ed745e0edf3e32f255fa8e5baa866f66d5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.678b30e3.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqUCRA9TVsSAnZWagAA2GAP+welrma3QZRolXpJQ5CS\nstLFdCNG/lmPfU3P4eU7L8bSfKU1FWmWMRXqcui7vxWLgtzPiGNxyJUBlyHo\nDMxqSQtjpJ5QJ3oDNXGEbj2M2tqKacxi35bekVDih+E/xeaDeyxjOs+ZxbY7\nkuKrAhq7NRnuzNwiT//Jkcuz0aqIbZ0CqsE0Yn8MVnugb1Wgz3M5R0U0Qz5W\n6f/xebjDRdLHEY2FWnj+j1KkupNPZJ9O2p/ruguvw0kvdTsHSe49EGNHAm63\nCMTtj1dfmbZxd+f+KT+mElmmtggwJUfjdrmDXyBLZYiDYnenkSFDqJq407j3\nyZFRNkAEn6ZjVYR33aqI8dMWT+Zu4CO6EVuHnRvdUzkRCmSr7i5T0uGCUbwP\n9ug9r+PmzUyiN8/9zsWXWVz5XGN9WshzSA0TJVhfDa3Xf1fCShElDhVyK7E7\nt9xa2FVRBVCAP9gE+O6v3ZdmHqwwAd8cVs0mgfC9UOWH+/kRKiiVa3aQFboV\nc21pCsVu1HPon4kbRFXg1apSgFqz77XZkYEYDW//7OgqSZTfHkBT/xmec3uG\nzL3nN6Kzn0LLaSL+/k4legcY1Fy/2xZjvGOuQUi2+qGzCZEY/NHM7MphFXEu\nlAVNIQgnuC6nKJAHA/9wG0jNoczQKLNWFaOuW2fqUDWJFg3VeziS1VKI2BXA\n2WA5\r\n=ZJVo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8pSA/iuPHT72ADQCeoIKme6WajbAOqiA3dsqypJUIaAiBUhnSOm2iN5nC45Libxwz98SeF8R6mHVcSzHIgFc8MGQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.678b30e3.0_1596484244190_0.1164086377639657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-radio","version":"0.18.0-canary.21c55569.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-ripple":"0.18.0-canary.21c55569.0","@material/radio":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-C36hvdfXxw6kOQ3Mat95qz5PGqfLMWnnR6YVQeBMy5mAovWpf32CUQaH2VXgCYwUdgaslD8zZnBMUVazyLGkEQ==","shasum":"97e02e23d6c028fde9cbef4dd034622b8d171209","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0-canary.21c55569.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGv/CRA9TVsSAnZWagAAW2UP/00sY591gCcHjqv3UaRv\nVPOG819f86rEAjxEOtBLwF4Gh34YL1biTiR4PLR3X+jCpX0N6IKZvMzdg2HX\nDx05v5K8gARy+BSmdl7tidU2dASx9rOmcvoSRvKVgxNMBnjG87tg8uoLTg7a\n8hPREzVf2AViZ2WDXKDP2/VIoe4/4WEXdTCSR5aJA+xy+hifSujpsiIdJ351\nyQ3iFmwizGJX2LZlNIky+Ua5N5eY3v4H1wzH4qwFZ9GpKOJWynRAES3iToWk\nZv3KNlFeiRXTfMcMjRcJouAYwh8TNBaKnZG4Oj11SzVcrg5MHN6P/zlm1Ojc\nGbhzvyVmj6o+ElPUFuQUMYJaEPgtYOHojH2XSqstcP6ZFyoyAlN/Cmctgp07\nIxZsimM2Kz8L9mNom1/KloZ3SZKKJuEmx/ihlvmGI/Hj7VangFfAavDDra8L\ntnWN8+t99LyzRgos5EgcKjJw/3HZpZ5K5BpD2cC426bU6MENrodeWKpKDl56\n9xsk05INjCgH6Q8mF3O9/X+atvS80l+FvXGTA1CqqOM2zralsg7wd2lmgbpT\nA8K0Ofg7qVlC5xD/wyfBE/qz3ZCqSLF2cVO2yZVy3+tAb2yaxjNHM2ZMZdi7\ncBKUcTGcugdmmD0+SAQ6m9sbz7pBe3RxTs98M3UIhgx9VenbjHDcJUjhy+lv\nBoeL\r\n=NL4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM0OUGDEkDBe8FAckOeZgtTgmXQ7RvEVi4C6Z0iR8/dgIhANxn534cbtZwSqIaPPev9eIqtMdS2nz9RNMOKrQOJvKc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0-canary.21c55569.0_1596484607299_0.745708751977274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.907d4d7d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-ripple":"0.19.0-canary.907d4d7d.0","@material/radio":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7YTMuGUxEsx+8W7nyIj4u2DQLfOSeeNldfGw+1HcQdiSiCR7LaEEiG6Ptwc288tY+dlznn8B+pSpY4IA65ggFQ==","shasum":"8f0ecd31075c97f343b57347125a62c575c5ff9a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.907d4d7d.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAaCRA9TVsSAnZWagAAuzcP+gP2wa9KPsT0WnJxhUJg\nWZ57r0k+nN4s+XQFg8HsVyL1s6Gy1UbVGTEf23Gufy/QVZC9xngq013r0bSZ\nuTzZ56bEEQpZgnFUuPSTBM9MQoxnfjEHcwduWORRh8HmF59NpopufDSqP//7\n5wTR2W83WegnzJEve0uYdM/ge5aTyJPUP3h8fHoTVpInUe3QlAz+hjXPK8pf\nT2a6zjiMA02VkiornleNklr/ZISyR0mfL83YHdW1up5/h8UxrlInUJIXhkvs\nds2sW+3hcRuKFAGlWpAE56evsP8Whu9A+66+kEazwSqN8/64B5ESISPaAPb+\n2PMibsBcZXubcxW9jXv0q60juT4f8Kn/9P/xW39yOo7boMOrnRGLrNso9Cjn\nlbrTPcHzaSGmtikLd9FlaDk1ScJOzBQHLkVoa15Zy02sM/TqrPc3+e9xAK+C\nFa1z6R0uLBCuNGoIcmVc9XSOafrLSExHDfa/1HY63XfnOweng1Q0REoUcbfI\nn5srYaq9Jrx5dK+ZoPJe9vMFIs+nM09sGn5tJoCZGdF9FITqH1lAJ56oMTWY\nILJE/PfHwonwFkfHhAylRZ1kbzflm20RRuaF1yQNiVeEGvwL0nrHVrMTo/fg\n305StLvGV/vTcgA52gbYTi1wBgW9R68e0SCFe4aOfHpyqLzpegQV1D1lgh0z\nz/LF\r\n=mXob\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDigHGvFYFmeClsx0kboNU6jAM1zw9a4+2sbs5oxUxuaAIgGSEDZ8MI/1JRLRQBP+o1BgVBGLecul50WfyjHSaGBjU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.907d4d7d.0_1596489754329_0.9258641009102275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-radio","version":"0.18.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.18.0","@material/mwc-ripple":"^0.18.0","@material/radio":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"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-radio@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-cZRJsQphjSFu9XWUrZa8sTOitOwQHkmUD9DHv73M39rBx3LqXTNWpxIOcXUbuc31Gt0EGX6v0Fi/PzW+9tV5vQ==","shasum":"bfa5daf953406f29d36fdd942565dc2749dda59a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.18.0.tgz","fileCount":20,"unpackedSize":115095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICKCRA9TVsSAnZWagAAon8QAINbWZOP+KbNSHl6jPF7\nNs4hJkoJlNj35dgkIZOx3xOcmsGOYQTQ15l8QUoihscoSCF+FQcY67t9Mb7P\nDgVOjbKX9jbA1sizK3yLPBPtowkw+Jt2HhM2Aj3PQGXko0QjtANWx/7HEp8C\nz2Bqm236bW6nAb0DterBGUj+QMU2psr38m2UDntoROlPVAVyGsCatwtMxLax\n+rvOL8CGtVJxNMof5JwiFDKts6ePmnAlT3nWD3ssFbU4Fq0xxLhQL+1K4+yA\niKyR/z005OBwsQEOblgQpQ9wNrXbZ8OhVfPtx62m7fICWnroXNGhMtgPY/hh\nELz4FDLy0WiD70JK+sieqn12rAyyTM/ABtAFLsa3ypVDqsycsbT8yuiltc1x\nPIduJi1b7a+gTOn9CWd02cOcHcrscPSxuFYEluN+Dj1kovn3T0owwgGLLpcf\nnxgcNVvr+VucKNryqcLN9ebc1MHc7C/hKSOPvYb/bCptBIlt5+DHE9itxjgF\n0ydZhqKpM2a1y04S/wSoPTIQ1NkDM4+jmdQiFv+BjyrDGdiXG3BOp2WO61ze\nburpDQD9KZ/YhHLiD2w6fEvNGY4qAgmMIb9ZXVQ7RvXvmwd+qLv4E11/GMyT\nZfNOObeQBzPe8U/2CN5O2rH+DdZ+blNVF3OlN4nJwEZeAkcqvaIJsKEMfP/1\nQAoD\r\n=Ui6C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUuf83Jl9V1mwuC1zbvr68f+pmk2bTjQh3WQMnE0+ghQIhAMm8kGrbx0LPqV8Cx1c+NwpTAq4zNXvloQbHnHOtXU3B"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.18.0_1596489866155_0.5785726530666802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.f7958e4a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-ripple":"0.19.0-canary.f7958e4a.0","@material/radio":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.096a7a066.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-q4Zprp5ZUiQtzO+7Jd8tr4x/4l3OpKr20USO2BaLm38Tkuu9sK65d4Expg8daEvJxchbTYuMVyTU6Av5heBmbA==","shasum":"411633933d16ac260386ca4e5f97b024d7c43c18","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.f7958e4a.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLGCRA9TVsSAnZWagAAk5kP/0wbktrzcUm6Zrf6T1KF\n/Wck03LTGUuSG1Le+x4f4t1oKU1t4mgmdX6nGc1M1dD4Mlz9jsy22ZQeucl1\nd20Rt4QOGoVBJwOQxgRnnEiLnoLQbNMLr308KmmoBWhbFgVOscU1pn/gGprm\nONsq7//DzVXuew2j66D4bNiWMCf8cOmg/qmslqWxyM/jEKnODG+ppZ8slKEh\nEZfi6KPGYVhh9IQ6r394xQPM/ORw0PrvK8GOqoz8vlOD0b/EC7+uKVnWoBvl\ndsxyYSPhCH8Y+LJ7pO5XHwcT8IHs+ijkRbg8GxJEi5YU66JIeuKZT1m4qUlJ\nSkQz5A7GySv7K4gDJNKXES2xRkYQt3hVyPy1zaneOgIe6VNh7SyMmWudxBQY\nmWb+URF3r47xMxU0kEmbmFIvXzdQMOfV99TfkUN69YUZbiauzJaJvJQQ4fT9\nlad+UCp02DWUVhq6lqS+eiim19tdssb/r7/tnChi+i7QYzozJ/u0qvrFAeSE\nog/6ySaRAtcBKpD5cm6kO89UNtgOOlKdgD6OwDX0ljUaNOjd2Lhz89lQYwuv\nIv4Sjy4uTexEc61Wz9menQUm3MoWsqK6C/i/VOlfmweIBIHeAfORbk8F4UyO\nKolRNYj7GH9FfLXQ6OE5YYWwT215a+prZlD4wVJeEQq1/ub8eMc6L5tkq79U\nmzHv\r\n=pdgx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6kGEg1S/su9NTKav1Dbk4j5L2kaJhs1siWgNr6L6TJQIgN1YKY95U9N7YcsSMFfiGgqUa1zvLARGmtvC88frexcI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.f7958e4a.0_1596506822167_0.6664378955915249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-ripple":"0.19.0-canary.f8ceaf79.0","@material/radio":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fOymEmMYHe7Iu4mnhArSpMd3N8mbG3K7SN4naXETkjma6F68VCOAHmX8CFQ4JiYT8ABQsModEDhcLuip8jMO/g==","shasum":"28428eadfbd68a4ee5c209f27d5c023af877ddef","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.f8ceaf79.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbR3CRA9TVsSAnZWagAA9qQQAI1b328IFck6hVcXduY2\n/IPT02VY/VtcE7xpHR19SiBtTvqIE/ezmdiX7xEgzSyqifUTnIqRYSlEsiZA\nlGFd65yoeUWcoyiq50btJUKdQMH3Fb8vRf3QIjnRZojxHEBVUM3zHQ6h3fZI\nCpIeaqlOerN/fuLOyZjf2VB3N0nwhoyu/d4M4dISkXCuKIrtSPaZgeuc9Z4a\n8lzPk+CEM7NDaFVGvDRhVZCnBYv0lj9fzGQ6lIruYsvBpSckwKv8TUC0hD3t\nktkaOOUzT9hQFDk/kExQMlkEeed2qc/b4nBF51QC45ulZvMEU8F3fiZhvLIB\nWCRmRZfChlbkWQ2QHkSvBQb9EIpDiqidXeWERSJOl2lZzrxd/YcqCeb0lawP\nUpem0pqruo6Fr/HnoobIiBYFC6VrV5TNSLevKs7/XbxLYdbAWx0yD334xJOP\nSFJzrvWs6fdIE6F3B5MDkP4A4uZKRcpzgOjKINwlwGLb0ij71aV/ZEMVO33V\nxfTN271sn2joNpkpoPkJopZRHbHvAFjyv2cqlPA0awIvFC922A++XY8ZpaZ7\nBlixunD5FbFw4I6CPGYF0GYWYK3s9igoDy48rlvNAHI36kqyGNSUEPpZvwtv\ndOx0ODISTQQvEcwl/HXvfKKbT3Ltlwm83eRk5zJ6u8ka4D0l7kQkyPSrTlSs\nnMuL\r\n=SA/8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2P2nM84S+bm85CaMJobuJuTFJvNz55EJ+Ra9hgBVGrQIhAJFLVh7QwLjLLi9LXTl1x2605mUMlKajkqTQFIRDY1C0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.f8ceaf79.0_1596568694962_0.9920803593980092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.6b9e385a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-ripple":"0.19.0-canary.6b9e385a.0","@material/radio":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tNfYE8/TLQHx7hoGnhgLXOudhHsUWByywiRPGOYuewIVjQtnqWoMfeHmIP65owInFho7o4ZTYmt82Jl3Tuq5jA==","shasum":"8d6ed91c4742d666f9494119aff5ea1658aadc16","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.6b9e385a.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNWCRA9TVsSAnZWagAAYJcP/RWVLuB44cAfDUbsae1/\nVKJXpkhS2sl+6iBH+3b+U1d7rmw3IzB4MiL66slNMowFCpvi7iq6fUVmv+XT\njmu3R6X3XPeGsW/8ROH7IVaZ0x5savZP72hRXRAr35/f6vmiqSawnwkroxyr\nMhmeEdMLpXTbpkn8ZYgNcEMa9D9SmH6HaEAOghDKbn8Ig3Ncz5feEzAj8uz8\nEnmDX7yNVNPbOLzzI4trxZJa4dmZr/OBTV9iudrwgvBKFAjZ0q0eLlNm9B/n\nsgekyNaER0o6kDMbck3KdlJ+LPTg83Uimy2O1cyzx5qgTBgI61+Fzyj87lGj\n/TzvTeDLdyJEsTF0fZIqtNa/jhWyJxKJwLLN0OpTbqL+98l6WI0lEeUvjcGF\nSgRdXYdOQC0u9vkAnJDOVXZYtXaTiBayZ4k+aXp5OBGDNVovzYHHtOVOpTAa\nOTDvOXOI8+asyOUaxhvQRInkBHnj407/vo3QWCaJrF640uCemAa9Jg+kq4cg\ntOpPIG9YbjOvCSKKelyua+QYT50HwjjBx0A8wSoMCWP6GCjnPPG4pVQQ3JNs\nHxt4tKXUHzdxpnErwQUE9Q8TZMbqrttYMIkfAror87ZhSUdXKrxOzrYZP4Qv\ncHbbei8OBlZvo9ow0EvUlwe6h38tZAWTMFdDeUCSnIXi5rmP8mS5PjAUTxJG\nw7KN\r\n=VxBG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxO2QacKdslwq0PnUvJVC8XgXiiCJdbJh5V2oN5WGVLgIgfXWOD5c24wSjJwe7YrV+pYTLfprPlIaJTEF+VDxZzWg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.6b9e385a.0_1596576597610_0.7734817528815097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-ripple":"0.19.0-canary.9a7e6d2a.0","@material/radio":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9BrnO/BLOuTjeDyTPZRlRnDS2+1v6U/U0HNFQqLBgZ7AThDrxeA5L4xIOrLmZFAbRekDTd1RHVwlM58YTmgvuw==","shasum":"4e001ceb11effc6baa7aff1854173cc93a85329a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuBCRA9TVsSAnZWagAAbocP/jpdcqi+6WkRkkJjCP7g\nKdX7yOBNaqp7Nwh+6q71kwlBLkB5KVl+MvFBSr1Oa/5h1wyibFnaVp0xUW9x\nHPGmrC8cQwPkX4WqyWDHvy4YGZnXhE1Do4Slwy6sbRN9ImhWWzSJ+w9nYz67\nMYLJvOL/U4DNlaK2Y8vbpQ9nrwIyqVdtw3LkMTwi+CD4CeHjfuk1F7l4yht7\nXo/bEsUuKg/72kIDemjNDfqoaEd8uCIBdsmx7L8lO05M63XRRkYsVsQNx7f6\nr4o6raDPuIovjnA/wciyu01jUytOa2r2MipY9DgQ0MCNAMAwoSlIe1n+VSNO\nQK7KuqHsVCJSnpddY7+uKfawE86LGJW8DgmBwRMnoatlS/vu4Jss62T83woB\nX/8u93OGK1Srp6xvs+6h/k4KJ2w2MXFf/q3cTlEEDdZS+cTrkNFtyGnT5d2w\n5kyj6x30FQ9am6hPbjyoRCO/Z6aegH9cnYWCph5yZanJJV28jbznwj/A8x8k\n/JOitG4SFm1viXerglJDFY9SlWD1KmsLI46E5hLPwtJJ3r8x3xx0Vvadzyig\noF/ChkciNYdduBowIQyBwCJSEIzAIHm5J1qAi5sVb9MxjZsm99ROd20fI5gJ\nGd61onWltlL37D9/mN8krgFRC3JADRdRzgNPk/t2th6cf/QoI1op4N2u34fB\nLkGT\r\n=yTsU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqIPPqySGJ2KqMeLXmh2c+r8l7bcfOPftlByIAvpWG7AiEAxUmLaAyKFgC0PapWxxLa8Fa0IuSf/Z/wppsE3f7ls2M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.9a7e6d2a.0_1596599168978_0.5854755107249887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.188f3f1c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-ripple":"0.19.0-canary.188f3f1c.0","@material/radio":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1TsqY4VfeNNQ9tTjZzVACkZd9jOPzh1HfSYscfc/xE4X6nksePG+1JUrHbIGLs59i+LOmAP4clvLAkiJT5kY0Q==","shasum":"ba61d68b46ffb6d29a6177e0bcf904e41d7d8394","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.188f3f1c.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbPCRA9TVsSAnZWagAA9KwP/2BqHssrZQZA6Jdg9zWR\ncnuFMbzH/Y5UD4ILcDHrPZX1cGYz71RmbxVSEl6t3pn0jKd4uO7Bu6e4okQh\no2YhyfnPK+belQXo6w6Xq1eFHGgNmMJEhGqNoOY7iNO14BvCYvKyG030Om0k\nnM6cL5U4/BROKxInxn1TFYfCtIGrxRsRIDejbxucUaCwY7YwJ6dPR225r9/b\nE2FzNII5nVJw1O3xuTmvGFnqNyp+OXb4W8DsUEp27N59cj8652N9OUFFKnoR\nBiVuwUiugbeBeBZCLxQHCBxOMcOUfumPhLqYZ5R+t58vMbwzws5kCQWfly5L\n9zGJC6dJXOO+ROxupC5TZiCMe3LyIeDimsH7mbj4Dck2TPE56N+EJ0kj1sY+\nAVxYPtxoXQaM+XIopIO7aeUFsI6qP+MQX/MvbxTD4ua+mU3hLggHPSmbMhCP\nvoZIJW5KI+g3tHPA9d2WWwP2Fx4gEt6wNh/bXigJ/PiSNaT/8GCcoTQBnRuq\ngzBnmZgP7usomd750IZ6jhEVr3ozzr9UNUmw+vn++e+L0ZVXE12/Z/+JuDcx\nuiJJdt7Ju7P91Hq1CX1d9JiQCd2UEqj+v6WcUP/fowZOkwkPNW/v51cdGWUE\ntdAMOYtUHAAljJzTtV7iViyi53zm6pTfRyRNSlv7XP3R5w6awlZ8tCD1whim\nzvMb\r\n=tAeC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8gOTAuv2bhIwOpSIdSkYTAWblEfQDpTxBY08IRftDQQIgfkVHI8tyGj1F6mnLyYLp9OZdKsxZDk809yxX4zgSMfM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.188f3f1c.0_1596651214650_0.3873543407595552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.b6106add.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-ripple":"0.19.0-canary.b6106add.0","@material/radio":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-B27F/OtMrQHqyTk00+9u9xQM2DwitAkXG7dpWzVJqymTVIryhQ3BWNea1Yaa8nUJwDa+duEtvhShWQR5NsYBmA==","shasum":"694e367be97c2ed023cc9418d7f279148c53dea5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.b6106add.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtcCRA9TVsSAnZWagAA+ZcP/28RzkXDdxy2RvKtPQEf\nak61DBZayD/YlLj50bwo0ZY7Wk/szl1ZblCsXmL+BGK0ylZdgu1lxLj6C1qH\n0eRI28RsZSHuZXPYFkLD4jly5nkTvnK/6dPQEQkT/T0OM0q582Ye576nL0Si\nK1C8XK75bh+Z+3BPrua86sgLcqYhquEvjXP3lio6gbdJf1RKIUJLmsPosQdI\nM9APKd/SNrgw01d5+TQHFtB7znnt4FTMClaGzic8so8s8zNUk8jpi7XmkC0F\nynikXAJFChVDdgMAE7B5TytFbliPG9FAjpTlUsXfbJuxyUjPmEA0SD5mBk+V\n1jPYHL/2rmsjTrRMtbm6JSmBS5qb62N0AE0z2skkmb9VU80SBYxEZjlFB3pu\nnbdXfw9nbvRK45jfaVVS3BPSW7PnCaoi1SlEVo08wj6W+FEAMFdD+i+QI1HT\nCggPwXfxJckQoshw/G6IxXchvAQipTG6KSKNn+T3w7Xtj8LVprWD5qXXkgoD\nqKmf+/8oWG2iPQCbY72BkzHLA5pfgpx533Lkg5cQr9MPhRZiDvTkXL60fafl\n6IkA4iSGJvFx3VLzBGS7A21pboIAh6RYv4rgxOt35pkLB1NrooNdYeQDCdt7\nFaad8F0Jp2SXsEweamoO7tEfxyWItIrTGOXBGJZsxhOq/oUTlVCnW34AOSwB\npdms\r\n=L2PA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnKZ2c2+KH41Nn7VsS/o/8WI/ely8MAmptxSG243t55AiAQEIytasmqdi5U66NYg+7exC1tc+p0qzkVRqJMKGnneA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.b6106add.0_1596660571806_0.22878488119632956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.ebb4c667.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-ripple":"0.19.0-canary.ebb4c667.0","@material/radio":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IR87TW15kMY82hrD8SShIG19R6IQB9fmMmeGnPLWNUQe73T0h6NZxpDtmxR9CQB0a/EjgIrB91zRQE05ihYJRQ==","shasum":"db01af592226a7f6d6472fb8f93e1d1f3ccd120e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.ebb4c667.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xvCRA9TVsSAnZWagAAbZYP/RghSfjkPS/AW6Eud8ad\nF/0Oh4Yd/p5qPLd9ZFNDxF45qTsg3w3+Miga9lZAtGh0UYk6SeibHtBYcBs0\n9g0vc/ZsSrYlOn8G3qL8/G84+JqS06PPSaoisUveH7+w1P+9r3MnfFoYhSSZ\njLl1uTFJ8ca2lC2xcAIKxX/hto8fR+MuIE/csnGYrfVts1D9vtagEfElTH5X\ncdF12xE7DA/CBdmunnWuriQGVrSj0uY8LT/buTOvdlZ3+T40rMBO50m5TWPJ\nnOJ6WU1A0PcIDSItrLEeXZoVZOiF2baer5osTjjSCrpdkW+ndrO1OtRgpvUU\nPGBBvLD480kG8VK0edRenl7zPbvBmf34WKXCzUTpsfGLXclU3B1ZwsVOrDah\nG9njPKthrYCKSv6I3/9WC9aoVgWpkgAgUHWGYiA3qnXXyqeq8CBC4eWZSSit\nGgfLSmgweMsgISDvfdj3KU8Q0agtiOBoabBMkUsiipWm/RPuglbAzewzeTZG\nkxLHFecOXGs9uVpxJlCGcnB6x65XOTi99lajkTPQqTyLdZaN0ofHAlQadHoX\nuxIDJSV3P0ScYxYgxWRPft610Yp1IEexSSE9IQorGvJ8KsEzLG4c+wjoeGz0\ngUBKb0Ow6H55vQWojPUNbLqAXbrjRmudImS7qauDVIACNa+3KjNuRJhHuPE2\njkeX\r\n=iMNi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrXS/Zx+IeIlgXBe8orUcIeROx5/ALM+/Ql5M5SNEDDgIgNTMSOhbPh63Qgfd3FkSGDL+n3Nimcdp7rjCT0m/AEW4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.ebb4c667.0_1596673134591_0.48425696413762753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.aa44289e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-ripple":"0.19.0-canary.aa44289e.0","@material/radio":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.1b44b43c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-I+UbLKdWHhRsIQX2vP+DwYf+UKyVYXNju0Us3rvJEXYaFRV5/xmO6O8+MGb+KzdiPWvvtGNoz2LTCKYqxT5hww==","shasum":"354403091b3ad7c53c6f86198f0e460e6de7df30","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.aa44289e.0.tgz","fileCount":20,"unpackedSize":115147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuXCRA9TVsSAnZWagAAaU8P/2EGmDnAl4bUl4A2k+ld\nhVRXbcuefE8hRBodhFUu1T28306abbEtE7yY/Yd3pq20VhNTriAXMhRWql5u\nNYA+8bGf1qXY7/p4lNG5k1NdQQBAby+6BFNYt8jxjk4ZQFgDz3fQkOI/iw6U\nsfJTNgHVMFkNs91wH+4rIyM18jnh6ZB1/vjsNNR0Rqny/gjbkjDi6EkxTb/d\nkLJVfEFSjffN4XQWOAYZGCnNLjVhMm5A5zfotqDXaQYeYcKaj6Q/MavGWVyC\nbv7JdT+7S1MADnlu6SGd45xe5UmrCvq6xe8hrJCFLWbQT+jZZbc7VU10CiiI\nXA5biuDawu9FhxtMAcd/KdOfgW9AjsGfUZ7aiteXVQiGcOgDdb7ptSAKoE5D\n1wqhxw4u99foJ4T6WNg7byzEnpaib9smuAhyTb1rL8yZmeHXVrqVSqSQP0uO\nvfiLLahfNY7h12qSnm7dJ5I5TfnjUvrAMWhreALOL/UW58F+F1XEJQtFiVcd\nrjQtZp2kjfdcCLDQAmp5G4Q+iYDOS6F3wlUYtmbtmhAfVR+3cHz6gB779cLD\ntz7MYdB5e7UbhoVoe0f8cfM8qgj8ngU+6h+K2jXcuGhLsQbvXJkTxGEWcL/V\nemn4lJ5ADC1a8lNvQcKcb7rY0exXYkRzWKn4o4BL92SfxVeDfP0Ezw+ms0j1\nsgXk\r\n=xFEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJH3+U4G3vHoiBIJTTCPnxryfPnJs/jEKfUi5ma6YppAiAPiCPTAVfJb7QZRRFaXtLfwSipL6TvbaLh4ltn0t6DXg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.aa44289e.0_1596738455482_0.5378129133389276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.e6b0816b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-ripple":"0.19.0-canary.e6b0816b.0","@material/radio":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-13ctrj8UHegAYDkhNXEuT6sbVkTGisU3fBqGKgDVtdZLD5EQ26dzHt39TpwUMiZgF+N176V3ZHEB4J1SygYBiw==","shasum":"bb57ac7d02ff76c5065a1d07415321e3580fdf5e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.e6b0816b.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDsCRA9TVsSAnZWagAACOQQAJ6p2DUkurDNIhSm7irt\njheWr+y8j8PboQ1ux6XoZcJiJ63Va4WH3+YjfHTcFIXeJ4iGc/6mqqKP2pgP\nW+0eC2RZ7Z6iBeeDi5g2v3Gb79PRj6BusZojU+K4sPkR2fxms0miknpR8ATk\niYl7mHrntPpoL0i6i7C0ozCgnC+LS1VCenDUFIOd3sAAo7DDU18B1VKRC5zH\nU/gfolsUPRF8sDr/5Dy4Aaz34M+F3Chy2vH9WvblV4NkNsYPFxaUIiKXgbAd\nHwLRdU6hEkaqjQKqo6KiC1LP/yVWQ4niUhlFqvHtONzJegoqucHE4ThZumcI\nuB4jmAHL6yetdgGIZYzVM3S6pgqXp6NQe8Ee/xfslYtss1Vj1MDqvo2mCwaS\nSUWQQXSb1xTqPxEwK86Xg61Lycsjrmh60WkJ7gaNo+eGDr5KHM4bgj8hFU4Y\nctGh5h4Of5ynKoL0/Fgzj4POY+GuJOY2R9mnYiDBRDRwTIq+S9AihMWDyn8O\n8SYeAO5nbYpkzLstcdvWEx/73Px4Uw6DvP6ghLG/dB9/S8twoZDd3VOvFCfy\ngM2xAamDGaiRMVwDLmVC2MvWvMDHTQIJJ8xSjIXsozfAoV6KpMyilbNDeDsA\nGlHRTzwc1EkIdN3H7YDrV5h3TB1/QwPYPEi4/z6EhiIB0/Odsg+2WxBdrCJ6\nabzs\r\n=Ao6c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrxrZ6Xc1n3D5JLTVtzOz1Jjg1JknA9gESEozWm6k7ygIhAKKq/SOlnfxWkXTMQtPZ1HAVR+DxA64xDNQYvCggLpE9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.e6b0816b.0_1596825835610_0.43917281234063177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.96d15938.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-ripple":"0.19.0-canary.96d15938.0","@material/radio":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-y+f2UNI3Xq/dwohSBiugHYkTDDuvH+R2hvqO89AJNxrCkMnWtU0GBFk304+O94wqSISSRB80lQPPPkPLucxNbg==","shasum":"702b29aabe9ff63dc69b76e33bb394b8ec4abb99","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.96d15938.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmQCRA9TVsSAnZWagAAjr8P/R0jBLwJl+7u47wttBiD\nH0gciNAAVyuVpT0UN+AkePWO5yVRaJtsYXo0mfo1SJVdsGauvzdJu72T3WLA\nyz1NRbzgjAvu1XhlYPi4JxQI3N/y3pgHD9Gf7xAKabpp9BBu6xANxRpgDRuz\nICYVAJ9gr3QbJZ+EBk5OGWJeD7gfPg/XkYduLHVGnbQn3O9lEPglchOIgk8X\nmgz43I51+mQxs0ZWwdBP58OdM48EWJTcg06fmyeWmXAuO6tf1y5U/Oe/s0ER\nqTByYkxnVq75DXUE+CpV4NXeVZLq8gkRyAroVzcEzdv7Xex1t8gR5i7BRIiv\natSFTFa8Y+rEia6iZfP9/pq0W/rVVV6DltvRm8cgMY1Q71R6lBkBUUK3MrkE\nkO10O8mZ/7fFzXUfUTD61WjRM63y+BFXSAuK5O/ICVXKIxFqcTQBJGQuKkuG\nka7ExLvX5+bsLN0GSI2tJVWXkW9dfKSG2tM7L5s8wdp4chzaZBOJwfnohMsV\n3sHFxPIoixhxcmW3bhaxKqbFKQOP+Atu+whW77gLggurpYyrjRjwHwYhcTIH\nLBuRcI+LnESIPlgsqfd+1Unyi/hQgCrz3zHg1uotJjftKtJHfiE0FWQusRDH\nkwYXdTt+ro1JvBHjK9/0mt60T/luFkpMau0kgc3ql0yrI7mTxFGC32x/iMGe\nro4O\r\n=5MGF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHn+rNTR22Nlcu2ShGZs5qy3Te32La6VG9pyAlnJzmJyAiB746nynOCYsf8PdCyc35sB5aXV+H8A8/ps2AxyQgD4jA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.96d15938.0_1596832143591_0.9120205560098855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9d991c8c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-ripple":"0.19.0-canary.9d991c8c.0","@material/radio":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Sbdt/ddW2B+u6sQ8o7T/IJ66DVgDyWU1ZMbpXiQJaVZUHnwalyxQc/0D6NXBAwMaF3bjqpKLfiIgtWF5KRlEjQ==","shasum":"90c0c96d99d62436948e6ab3e8301a0f759d3afd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9d991c8c.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDlCRA9TVsSAnZWagAAjsYP/3xME2avhprKQ61lxktC\n1nEwokCtrgpKKwEENEBlzmC5ay60TacEdNsbJb3sxys6jFqyXpzLeW+aKg6q\n5CQg+Q7aT0tlOyiYBAPPgfXk1OszLOyJVbWr95KOVoEMZiV4M+iiGXqOj1z9\nm8X35K5h2reh2TgVUhrq+GXdPCokq33y2QzVZthiqCiykRWb9JxBjCCXgpew\nsfDthF46naSvotvqQuB97ERtJV8L9JlYTagfJelsFBSjdwC0fpFeKaBGvtbt\nUZwYLBxRzWo06uAY02s76KZUekzRjCMEcviEqgXiQ7JN5SXfswJDdkAoCWWF\nCB8tknnzaHLd3Ej/D7UmG+nkHXIABORH4WWskyV42iqNMI0m2ROliKfsnuKH\nmXyLyzyuq2jcNDpHSfHiXNzyVp51TDx7/W9KM2nmD8o9gpweh0clRIJB92py\nUFC8lPdnYwIg2SruGm70rWcxsbxtWlseOqw49FNX08ms6hYdbq879qedm96J\n+1pyM4Dp9bgB9G8aA3p9AhzpPAuffXFYLfTGShWauYzeHO0tRBhdtqsBXsv0\nMZQte2cQGUv3OgAtwEFRDjOZGPEE/nb/tKhu3D/04yh+Q7zbFHl8dLDD65tk\npcpOLQIEf9x3dCATg37LGNMVMEiJNvYrfllUPNj+8asI6cLRpco2F9vnHcpE\n1yDn\r\n=ao4C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiZu7z9t+/ACQo+hz1FDG8hMkMWBj+UsJwTQ3wWNrt7wIhAMKPE2BS8FLOHbZ2yuVPdYF0AEeaTQp3VNTTc3PImhR7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.9d991c8c.0_1596838116630_0.04465024990335387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.13bfbd72.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-ripple":"0.19.0-canary.13bfbd72.0","@material/radio":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dMvWO5H63dMowll7VXu7TbCPyIT0pNlvb0HiCbv+X1/TucrN+mJPY7fRgkOOnzfnjg7LoNzaWdd6XiSzGLAEVQ==","shasum":"7ab32fa60c8372c1a0f127739ab379ba3a0ac5f2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.13bfbd72.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+mCRA9TVsSAnZWagAA3NUP/j5vozb8NwYDwRqlG5Sf\nZJoE1RShMUEtDHAwdSRO966wFizIXspx+3KpXxoZRJZYaMciI4uC8irhQ+Ny\nhRt7F0gWjfEB3H0CcLB4IwlGemyKh8bYcnRxIWTr8TOJL62q1YkZcqz7xEkT\nKp5w/3uY8rp4W8YD2aLuZ51MfUJrS9hH/Ly8+c6HSLWh+goy5MXxUOqS8ZHg\nPtvhhd8j551169ZR1LVsXG2PJ7V70BENn0CHM7jzzDXi/NE6d0kiYsBxRFFl\n0ZurxbQAnZ3h32NFPEzBuCf8VpKeAXZfbWxY2isGHfdE3EfGchPzio0Uv63M\n6dJFv8iUmk6tl3myeIpc2JI0F+cBd0CgVlxft3ggHRvJSObcrCLeDTLCsu0y\njbuV3Vxzv/Kq53+vNoJnSPTKNdUWcQoaCiJgmZdWb0oygj20HqD8mpwKVSsv\nj6Z3ZbWVqWUJrjvism1rnDj78ymy8Yb/65+BUxxwNyVG5b6atrGh+5WbAYoI\n2Rk/O6oKX0CS1zCzFPzW86PZdDE+fa+1DaxOpcOWN7cOm/qnalgCCHqAw+uF\nOsN0cPIlQnP/u0BiiKzuWQZGg7BNiRjg9kuf0BdaCLn+VgzDKbc5nvOqgiGa\nS8sbXfSwaJ+awxXea6+GxxN0zsZ/gaH/HnTntnjUrnnZT90IMwjwzBFrz9HX\n8RWW\r\n=bMlR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMxzBaApD7Qgzbmk5Nwmx6RyzSWh2vWth9OqFsNqEgngIgGm1fp4RTMYOQHSURlNfNmjZ57Fa760Bz4er3gCdhSmA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.13bfbd72.0_1597087653973_0.624081991223489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.30b1b258.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-ripple":"0.19.0-canary.30b1b258.0","@material/radio":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.96a640534.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OVYe0UmUj8XhP6cfaSesYDBSiVio+G+4R7oYJAgNsbf9rdjw8lyoGJwSQ8qonvsWLbuHvfEd53+hVUe/fPTIzQ==","shasum":"4db6d95e7e6f87d49513099c836fe5e727a83222","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.30b1b258.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajsCRA9TVsSAnZWagAAXzUP/REFqjHvTZICfh2PBRJM\nL2+et33BUGzrDe1WV8vLGO66D5WuVOHV/V1egNaC/AMw3ripN1b6oahVYgnA\nEVjjg485ZRBj9z/oZQyAaWOeS3hUxjhtHvVFv5sKVx4NWZHdRioDVno4Qept\nk8lhcbf62K5VHwiwmmpPHp8gHEW8QVbRq69N6v3RUIQ9gyUaS4fg7EHY3yVJ\nXq60O8hbHjvuXoG20vFcFcyNZta4xNUFnWRQwyOPVFUjMSQLNVEU7ndF52Pa\nAPY0iX2se9WzXJBTWn9oTDx259KGqql2nPAMhILCTkozN5X6WVUIZUcEvmOq\nZTzl3Bizn/9iU9QJ0wGT5u+yJpGamYhSDwYG5QY8X+yG0hrsnxsxC+HAifJl\nPtfc4mKCjmAujgqP2TbjDVZdpqR+ZHCMBSh2c0g00UilQ9Ity5PN4n/uOkml\nONCCNJorSNHBmaPKPomiWz/yfinOZYsjhxet1oSl/vaBQmI7pAmnxJmdXcCe\nUGcFkr6fvHdARdlsODwJDXerNiUjRGtt42QOshtHautoqiDzfLK9zs4mQQY+\ns2/2WqEr0PY3up5aTQWVzNOtbo2wGyS8rCCs3VHhERGrdn2vy/TWNn0zO1FQ\n3lx+f8p8inQXh8Ihn3AUbXQkCfo0kqne/j4T0EBcxnCvoKm4cOlm22Jr/n3j\nwcCY\r\n=HtW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSkOWtK4Ly9CD2zfx3ZmkaGNLUfcWqDmkTkDG8Wp8jAAiBwc1NggOM1mVQu8QvqGHKQJft4w7/zYJgmUQLQq5NVvA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.30b1b258.0_1597090028398_0.23540158206297135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.1583e263.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-ripple":"0.19.0-canary.1583e263.0","@material/radio":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-B0xFgYSKJABQlPwE+h+2GRctoz5w86EnaBVWgBLUfbem1Uy+VGm8mpPC9kHqOyf/uLzYMbIhbV1Eka5PW8N7vg==","shasum":"fb8614c9cd9899d1d9cc41f4c792425234769ad3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.1583e263.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyV9CRA9TVsSAnZWagAAzcMP/RaYJVY4w7OX2jPya0JG\nvB7Wsi0EScWxXgPkeubqi+HYuF+qEOdR+Fzj64IHv6qMxkazZL/kAR5+JHTr\na+3PJD3qeGiVjGcFW73Ch4Dok80En2aHNTCmBQY69XkudOvKrPTpltCkJ4d5\ngwBmDVz53S3dPgir7d9FDhWUY+9Jd70XelmcXRcOZD2LVQlIvNDsSVORzpvh\nSQjGI59pLFtSDg7UTu4D6468a0MATNka097WBBwNGoo2zBm0lIAo5PDsXxcN\nlZ/GqEI2i9l4Pv4tFPvn97TeUcbNYdUGZV/LQe7Ega1tksXZFYVHPyoQhcuu\nkHeLhGI0B/MVABdDgWJkz+07UKUwU7FcaDZwhh4zY7TDiMtXpBlNACcx0LxH\nGSoH7AxzfyZ6qGXXSqtgb6DiGLD+7kCBbwAo6qUZDRSYmUWmDcv1xsQ1Aj6f\n+Zv3DwoGbsG5Ck5D/47GLsi5h1vkJwhSJFib5IOriV+6Z6l2RNDrbYHKcnrp\nAdbggZCvJnNY6NRlDVBlEuRHvnaZjHpVQYRcFznLsTvQqMcdsibSabR7ierr\nDl3a8lWlMzoAGqQ1dX3tcp2gIiLWF6EqjCL1E+uJUsEsLNEDk4WOJNyNp/YD\nnmbUtSmqrnRVdNnv/IsisE9SzC1m5PfcS7q/yFO3r70XavHvcV2cmxYrHJZE\nJXXP\r\n=f6XI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXUhISYxiKBdEh0M/o+vnQNI3k28unW6ZJJ2hMqFaG+QIhAO7+sGVc71ktxR2bPWNu3nW3qCCSEeSCJUpkIi3gVy2P"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.1583e263.0_1597187452963_0.8636555388953915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.fefb1a93.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-ripple":"0.19.0-canary.fefb1a93.0","@material/radio":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-H/PlYbbRzBR+SH9LSkrFYtVf+JX4gEh8aFnjrHgwfsamS/dXXsLM9jqBusGO8YSrXrRhAI++ONowzLlo/jv77w==","shasum":"1a43675967c9d534cdbd14659fbc2ab46488c06c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.fefb1a93.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbuCRA9TVsSAnZWagAAG9oP/jeIj2/AOVQ5natDJBjZ\nYtAY+ega3SnkRjiLG8OboFDjyGfr5o3REhqFgJiytfPT0Vonz+ZMv3P4UsUR\n/z0ROZDzlTeiG9sJtng5glcyOilUoOAb26bQv0jDTs6tNUNrQjeR2mBpXcvh\nFbZt2nOng+lYeYJpmS19Cs9ph55crcJOXYuJROfai9tBFVf2nVmABY9avP+d\nZGqccnxJQBjonT82tWEXppoO2UbtVnpP6VfCAMN97nr4ESXrMRKehyGaY02S\nOkvkxZ3zTRTg+jZm8M86965oEo9+ob1e3vw7kOkfLCO7Q+dRAJD2YaRW8dEn\nR1ZWsQk17OX/iD0UYA+25ZFEwTCAeQVcjihCAdmBq7hk3toRQiq4C8/7FU60\nDEfZ8UnIWTSwv6aCBM5AaSsS/DwEbqUZuTDxybVXob6eupu8UdYlEmFb6/1A\nbeWH7Bhl1K3v+e2tF+LUmsUW5/QqIpndbTTjHHb9XLXOjqlkc5PSFKlZvmVm\nFEdo0EhNXY4k46th2vi6qqf9DfxbRcBn+Wbk6osLCs6CVcITmvh2KlRRLg4w\nsv51/ATro3Q2GcegOwS7XvCGaGTWwW91yFXCQcP+IJKo1SOAf+EemgyThl+X\nDL6St0m6qqOqH8/YucIQ94McsDIHz9p0DjBd6vfsU0c7+TqYK2d7/pyQwI4n\nqrIC\r\n=i7eF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbqCWnRRqUmdh6NG+L8/bjcX7pxPsH4AIYlIjmGWAUQAiAT4nGKmC3aeCZB+Ui+aOfm7LZobGV/yjio3AYk7olXGQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.fefb1a93.0_1597191917891_0.3407864524916946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-ripple":"0.19.0-canary.1ac5b9d4.0","@material/radio":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hxtB+jZbgkSLwxOIHP1pGjs+CAkup9vCcH0Odvsfb0lheqYpnrujeVVJg4TdFG1MIKHGqtkjcdcjcL3gXf1Reg==","shasum":"07b47f2f59c485528da327e3152a92a4d638d5d1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSZCRA9TVsSAnZWagAA+r0QAJODlYY50FStokTZXBas\nW+NEVPylJ/CRKEMG085ozTCgU47ep4t9sc3+YGhMoyRjiJ5AeDU4sw9StATb\nI2AdboKQ02M6YJvO+401TsxG161JpP0uGPq3td5Z13gHoJYemvLYkM+3mncy\nx+VKAOrfZwUbTef9Pt58NEdYkt9OHrjxmfq/a4oiKrh2YM2/6Srq6+wxI9fb\n7ipIQOBwt0BtJRfWUI3/DY127RJ0ijB22dTt+IH0moUyUNQDnMYYRlU5FGzA\n38jFMy3Slqv7MnUCUJTKEAViuhKU1oZRMK6vMac87APgcVkZJhI+DJFUbjHC\ne0CEHGs3cr7L8YIlzIrb9KxmLrjVT73n/0KIo8OygIWTbr2UG+QG95vsu6z8\nUXeOA8J5TyGmz1XC5A2nIHcBGwinISyz4bW33ycVA0+GVlNgO1tLerePZfZi\nZoRw2Hs+MF5ab0Nlqc4ef9L3+vi3JzVZq5vixMZvox1dIP9FJoUAAbXGUUj8\nRBVNuMI6yuJ/mqVRzN1TNvyiDsoGyrV+1KAvcXXydKNDKHr+LXflAUSpHU/0\nT82c6h01qO32Mw1puNy5Zg1JMHu1PNwGC8763S9tXJqL0C8nS99HMbsz8H0d\nCw1NoYZnnMJuAmSgbopJHZCtWCosL+NbgN2xO1BJzLPjjLXaBfdn23fNG0wu\n7CPl\r\n=c03s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUzYPLqlf0EQxxmwFdx7o7xeDPjeIdNiiR92gqF8v2YAIhAJ+HxY9v65VbOynn+AqPo0i38YWwDuG/98UgyKbgpywq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.1ac5b9d4.0_1597256857335_0.07448914593115741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.f17f5052.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-ripple":"0.19.0-canary.f17f5052.0","@material/radio":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.85a5272df.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ox5FQATlP+cBPZ1k1MjyMd2e/+k+xU/mNUB3Azcj9Q+XD5B2RR+yNQv/rEz/LjSeOOCIaOLwY12gVOhae2BHBQ==","shasum":"9d7efa50532f56c4d734882fb1114611d6c9c37c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.f17f5052.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUBCRA9TVsSAnZWagAA4pIP/R7kISOio16k+ERdeJMB\np+lq3qCGyCacnpzgMsSQKFs5Q8UJ3hza2QU+LxUJ+NxkD6Om7D2HXrs0Byie\n70mAeH6dffrr7LfED82x1F3Ko1I2/QbDRA5Icwxe8MrM6u71Fo8oMAhtwK/l\ntcK4PgHmjtCKtYzW0MEkyR1qAjBUYZqbl4zN81s/NuHeKgksUAMQMeOlfQQo\nIjJzFZRzG1c3a25NVnHQ7MdDsumniaWgIuGpQsFMx36ZdmQLfyDLC3mAG7O+\ng5x6C/b67lAZZ1W0w3+K4UvD8fFHCykxE60V/qv1DOBauSqfgZgVR12oqGNX\nR3BH0FPkjVYVogLIqOeSjodkWC0bryiEqlwUXIWq3twNXpK4BbdDhCFfmNC0\n2Apma0w0AUfqtmFxzieYDBUZK2wKI4wrLkErzDXlymRMedzbdlIqzSaN1Z/p\noIU4ByPBz7UdMuCSjy3k3hUVEZNVYz5uF1Dr0ts8Uf1HqzEXUVhaFUFIxnxN\nHenmTyLrXGzQbWo4Cjkhq/l2WTXn8UDKzl5dZlfw36X1AvLB5D9I9nA9wPVE\nZL882512eYLWVmDVmfjAjB871hm5jIam2BhchXzkSArvF9JbVX828GthxY2t\n9lDU6caiFREBwDIi7y0zlt6vQUBhEuUcyY6HRgwsyevPm5PgrbQFvcfhs9Ah\nhn3s\r\n=cMT0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLCxKEkdbUHL83Se/YFHA23A2g5wiqglIE7fo7qHUkUAiEAxB2cwFm/GTHlRs8h6QSYjVHuckKwrx+tdu7OyS67AxU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.f17f5052.0_1597338880698_0.17575985023096918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.80b5d20d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-ripple":"0.19.0-canary.80b5d20d.0","@material/radio":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a1dcfe97c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5uqEpOoVWbVCmVZxHiTXtafll+b9kf+fCgBYfK1WQnE30kNoTQ9onH+IjXvBxbjESKUV6Agi7lg+1BoXIBLZQw==","shasum":"bbd9d90e054ad57f9e657604c4c22c1e6c3dc1bf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.80b5d20d.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYO6CRA9TVsSAnZWagAAiFIP/RljJ5pH5lZKIB3SjHbN\n+TWJ2vPu3UnHoYI6iQ6lH9OUgcQFuXUEERoU6X2ylYWhkO19XHOPsOP63d73\nZ3z6KmcutsVCk2r1BYlcDA2Eit2Nx2m4Yn4SYG2VCREb5CeX2fIdoxouA1do\nIFalE53voNhuSglPBRmeSxjqpoeuXi+DG4RJVNYNb/OXTJFPHVFVVS6Cfxdy\nvGdlTQfr+SFuvTlvEchrhtczbzNbiUDCZVa9TRfaYLkmxro9aMfysNsZQtpL\nX7cg91gbrpnKkPirGCaFLzvhTaE5OPGobDxDBPpmXpGO1pLpxveyXwBcT8kK\n2pvhOFfhIW2dXqYlbP4qlu/1Ly8xTTHf/0DiO6aK0/BIG1zMhQiRId5a8rTN\nLCANhhc+ifn9IwELoIirBmA8s38dD+LoyUlUn/QIWS93uKGQ0n1/d2lCqjAi\nHS5cfauhxZTY7P2vmFc9I8uS8wbVLfjjpJEp9PIVPkul2GanwNArNGmPW/uK\n5roR3oupsTIAVs3FzUQhL/wXL4qM7cHnAi5X+MJ2nLM8+++fSzq188ZLbqHX\n/WuvrOe9IoccSs9gLEq1U/cQQTkZdnWhqfO6fPZ2abim3u6zydGcLPII3dZp\nH3PvMjGBXfaJXjgB6SgzKoUAOdSX7l60FW8HRQh9Szn66ZYya1frXyOartDX\nw3Jb\r\n=oH2A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmyfwM6bG7NbPclQAi18bsR9UH8awpBO3aeJTlTI72+AiEA1eXdMNdLxbeF7ul1aIgdAXLxbhhYHkki6FZMWiJMBr0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.80b5d20d.0_1597342649873_0.7186733440925444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.758635ed.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-ripple":"0.19.0-canary.758635ed.0","@material/radio":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a1dcfe97c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PlHHXJY0h/B1KbpkNmmmB9y69Y04H6kFsZfvWLoPjnD0TXZe6RSgqo2OXurGxSTopKCG7e3ZWH/3ZyI7DN9pRA==","shasum":"22337c8212b78572d213a7e1917e049925041dd3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.758635ed.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNscBCRA9TVsSAnZWagAAHt4P/iaUx/SJ/ulnjy6MsI3w\n9MJBsJkT/6GRKljTfTqHCzTr91dFmTvQiUYKlAv9BeotJpUCgi3e2Z5/6O5Y\nI0rWk6LFp4bC6wf+NgwlK5HJWIEPJUKQgD3D4RF3tyBO0VClkcI6qX039a/i\nTLYjNSuVwsPsGDd5h2ipKq2ndFgGjC2b0ailWwDJVS0z7+2/g5q9GCYeaqib\ngQf3A14Q1cFpTZOWgWi8dxxq4gBXFFTVh1aWdQQbT//+mY3YiTDnRZVz3jor\n0phGt3gHMYJWfJSP6V0PJhCqp9f6DtEy/6YZmqWG40N1wgLuUc6pwDie69sO\n9kWpMMJIAkKFm1q6Rt/2kWxMKtvs44Sr983Er03u7/kbhdfDmma/cPYNXW3+\nTaWFFVIOSNp6QgqpCJjDS3ESyj/EHRWnVijj5to7K9JM9ip2zvvLJsN6ckXm\nwWtbrTQZCY3OVUtQuV8YlFPw7VGZuUTAUQut89H3GsqzxKY7AVbwugER/rvG\n7CuVM6ELcMiyWxxg7Rj803zO2kY+n69rniwkpYKd4JkOVhbrBsWLQ6gFwcnV\n+1VqEpmlq1g1CBH6SK+szwgr6Lt31UBnIGMmbLMnAI8rkBLhRkvcWqLB0jqg\neVdggiLDMjdnZU8ttmLbakEYdihrlvOS48PaKLRmGqyHTVDJJpYe+h9TS/2I\nbyku\r\n=nAfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqklVTOH8clnY135SjxhYEkmS+6wjdgANO5rFtPgJJUAiEA/o2/NM+FT+0WAv14BeVF7ipH2V3dJNp4SLMFXRInme4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.758635ed.0_1597425408689_0.12320320183684541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.18d6b808.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-ripple":"0.19.0-canary.18d6b808.0","@material/radio":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.150f427a0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6ZC6XmFVYSo+xfrGBO8tnMUjr0K6fLSXIbZ3bI7BnieYtRwPRNnAtJkM9UfL2p+dO4DMvomPNN5ntxIYUdwXDQ==","shasum":"2a5b9c5320d87bfe0c2c626f56bb025a6494255d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.18d6b808.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxleCRA9TVsSAnZWagAA82wP/j5kVxmW17YsoSUYkHew\n9bDycJzfOKi8YQ6xmhTWwfX1YpJXFQxPKEWcvNbDn3Dkt3tCldjS0oVGejho\nqC3+Q7r5lhkcIJO3j5LmpRGuWttdgVnbewfEf9H9+UGWQsxYgXLwFWAx2rp3\nol3MNE5L7k/KtXoDko4IJTx3dn8zYm4qL+/nOA1YsNgInwfPh6pkeyRzDCyQ\nLQwol5bozL/ypD1btTtyNkKAZ61vs99BvvR32hc57ysJJojKS4sBWjSJCEBK\n0HZooxB21YyeItqkOvrqCNcAJ3jugzNyYvt8UE3wS7u6DGkqA7TcT2JbufXI\nnHFrhdEbZ4+5BAs2s3QXY8xSx1qLaMevct3jkAvPPWuWVYnKwJHLh+PPkv9e\nBYNHBkxsU1g3MwTV1kCTf+/lDyelZjxGLHlDFTFKu4sEDum3ugWbtyBwgn2/\nJe1/Z2wHSv98tTjpIi1L9c0FcMULDnnv3yDMgWD4E/6khi2K0vCyFXAL39PY\njL2deDchkGB+c+/aSf3KX0wR1+qL/SxOBdIDPR9/pmFiwlA6pnMh9oheFRVn\nfX+lZI15bWqQj4ePrmiAQRwKmp3T9K0er+vtxquZcydHTh/Z59YiyDmqwUrb\n/AwvNHA/xqu/VIEnxnhbcegEgq+0RMRiM1rJBJ5THQ4DtVds2CtZn3Q4mVxN\nEqQv\r\n=XKlP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNh3sYQ0jQBJxRhrO5tocnSdd3/g3v+hD39RKmmJhDtwIhAPXxv1VKZO3jl+yqU2b0VYg0zRkA0Ncva5PqAmO2Q+7P"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.18d6b808.0_1597446493671_0.7382730109088627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-ripple":"0.19.0-canary.5f8ffbd1.0","@material/radio":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.150f427a0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/HRVlQZd8PZWc5GAHXgp9ODsE2K1MDfzig3augJujBcmD9Uaya3/fQDHMgwA57gTksY+Hs4XeIHzLhoHGqyYpA==","shasum":"2bcf3cd1e46ff57e17a1cfbba62d59a95ba58ba2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":20,"unpackedSize":115195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGOCRA9TVsSAnZWagAAglgP/iN+JPg7hQMmvM1Z8LME\nDD+w2tXznVR5N8zXL6n6sDRLgK0TWqsCIFG3zzl8iPfTf1Sy0f8zze+0KP/1\nTyDesXJMuauYCAHXQ1EK/gy2lacWMSlJhIxoyzvK5ApgQF4ZKXy3sIbV6Hu7\nRg2TcytUjOQ+K1ODDNgLA/DsBeLkgJ5/1dtX9fzr41YIt9W6HWuSgTyPpf9q\nXjkqY4qA5CXRgZJNgEN0MNd6T1KrQ+XA+i8NKRuux661jPeKa75RMyj4uki8\nzAn8TxEYfckkOnjPm5KeYJiIhnk25S1sWr1i3s78X7zjqgYVGMotPGkGxZ1O\nyJg8oPbmbagH+I874vtrgD7/WduT0zQfFdkovfXXd2r0QLK1XMRPpX9XwdO1\n45ol2JGupqW6m8JM3WuOta0VjRH+Eh6hIUYk7IDcKt/VsFvLUFWouZ4L7vNS\npX3NrhPplU2AnO+B16teHMPnBz1xN+0zCU3EikDZWqfAdz6YpYOQN5fvc7R7\nvd3+vPVdNCxVSYs70xB71PTQVNWeCv//CNS1HyiVsMKHf1gYyWKuw6vNxPOb\nkA0zz/OmiPHsV6pZ9OJ8U09lcnpcfctakL6LNfRykPqCDeiJPwBMi+jMOrqN\n4VTZ3k7cCM3G2vbHFSKIuMP4NRXFFtnq3uT01HTjm5hfdy16eajgOjbr9ta5\nIEX7\r\n=GjJr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/rDisr1T5zbpVXal+/Fq91u/xUivqSwbanhdDeQsTQAiA0nWF7IF+eRL21M3nkKqvGPD/zFmclmey2+aNcK2hesw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.5f8ffbd1.0_1597702542280_0.2651510924449503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.8604d59e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-ripple":"0.19.0-canary.8604d59e.0","@material/radio":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.150f427a0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HMduEKD5RQ7qPMw9SXAfU00gI0hxl8766nMVuhMQ3/I9iRt7ElQ0o7YBKBmsxPHDhzvEwkHQQ9UZsyqDEeBxug==","shasum":"60ca1038833b2e04f69b759d3737a0b9b609f961","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.8604d59e.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyi2CRA9TVsSAnZWagAAdsgP/2vL02iLOYJnRzOPx9pV\nUYikQGhYnrfqcwgaY/9h2iy4y5n7Ac1LNsR1bm7agYZHXYTV2V70fHmZPsgo\nzpoxQdQAh5H5i5BVbx+kpyis1KQqyUE8jlqJ3o2wSBOxeEBX4YFxtigTdEzY\nUG0b5/v1VTVaeV4lR2km37xNPiuPeQ4q7tMKbTEfuhfMw+ovlG0R8wbFj6Eh\nh8RsLCzwoYWxKYevoBHxib7QKNG7bzrTY/kHHhTRTfuL4k38OqjAtN+kazXm\n0+uitdrbYP6JRv9VMhr+tpJfPp6WD63vZEPqiKm/voNUU+BlDo6QhLN8fc6Y\nqeLWy+juSESF3aUMj3UkXoGQ0LNf/UHuYeJ971WseNdHtGPyvEPkmp3JCxP1\nJqI8xMIGrA7fz/fZIY4K2GrPw2qZOwcaXd0k30o3GBtxTAZAB+8DkYXfLK6X\n+51k70TBkCuLC++IF9c+qYjx60VxkLgA5kGija1S1XsiOAJ4ZlHY4pGBTBIj\nou1IECv+4rGwB6OODawaq/1lHwSRTR95wHMfGSRmVQ5K/CAobRNwoabBp9vd\nG4BTgKc5qo1Va4AK/Rj+QjU1d3noCbS6h5sSDC0TSYZk0uDyh0xJHAqq9vBj\nopdIyhBiSqMmWc9yhI0ZrnHTcMPw14KhtGo2U9qmacSMw413M76nYlW8kBi0\nnOWj\r\n=RhY5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDo6tYN8HatdZAkJsPPJ5c1hDsU8+2kIa84TgkV3F9YYAiEA4LKbAcXu5V9aUAgn5GZFeiK3hfRfO00MO6QTRtCBjvk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.8604d59e.0_1597712565966_0.5776661729320052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-ripple":"0.19.0-canary.1d7d5e34.0","@material/radio":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.defa599a8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Mv/5YVoqRj+QNxakC9JXa3929rVj/zQpZ1quIgERYBXlujhZtXlJua0D2hP+m7zrZ34mwejxXt+bZewpdXlpbA==","shasum":"ccc66353106da3111fb70e208a66fc346f229a07","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.1d7d5e34.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyo2CRA9TVsSAnZWagAAfH8P/ioOdLBy9IqU8dZLEgl6\nc7B8ZVpSFGQ8G4uWoBnnOwV6OtzFGOPZwjO9C5uqNO87G7T+J86p+/7zZfK9\nSaFwQKV6+hiwnH/GxGYNbr+55pHe2sYvCnl1m2BWqmm03mOTAk9vcfQcqYYs\n2i89DmMbS7ivOIMi0A4nCtpeqoBnXNlxEA7T/iV7eMp+2gsGgeQ1xpZNQq2M\nKdPjAXFAw6tC3xg6fMnegSk51pse5a4GAGXDM8r0c/kI7kv9HhCbG7zImShj\nOY2d1MUkIhyx6nfUK2YKlQAs/pB2NSgjrwf3VTRvHoL4TL79RxZoKULO0/5m\n/dUalgsrxN2vca2RdRqfPkqzkq2tnxvbMEG2SbLXj0kRIAERZyRHaHJfFIyx\nHKsdwRwNQiaqCArvLTdNzk/fGus/aOXraQ0CzBgFmY5lqCVmb96UyHb/ckGT\nn+FZeRx5CCiR2qXZ1GBxw9K/iMvQ3xhv9U3Yk8asqytTg+kRbfvKlAwlAA6K\n7wsw2t0ASbJBzdDVVXaye9Hvgd4hgqYnkXYk/gM6RZ8Rhpy6KTkEBO9Y3WrN\n5lsPh++n+jZh/HSTor2fd0RsKAYk2+t8xr7zb6vnF1B4Yk3a7GUce2v/aS/E\n9CBP0vII8YULY3VvJRpA74TBhehvkzNGoV4zQRwtNx8uzgQkILoBih5JTeJJ\nXC7w\r\n=jJzb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcL6nQStnr3idj5T42EV3xzhc+roH38XtewzfWyG0pLAiEAh1fbTqA5cEzuytngwFMrTxXxr4hMk4sY5EAnwRqI8mo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.1d7d5e34.0_1597712950485_0.6193325973986854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9cc95c07.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-ripple":"0.19.0-canary.9cc95c07.0","@material/radio":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.defa599a8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-36pmM2mYPO0f5dpSu1z2RGxx04bYGe5prFjAAn+PD6gLJb3VPZtD2kZW7X+Zl+zxDLw+HkBK7lL1ZfsT8/44zA==","shasum":"df0d7f4a376264282043affdee26de3c3d6923a8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9cc95c07.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywDCRA9TVsSAnZWagAAXesP+waEDVmEkDE/qvDafaNm\nJMOSVN98hcwgO8WLXwpNPoMaaJS/0O0khN22uGhDmzXRFw1NC314u5cEMDan\ndul2ocLxu6gFXytm/ieFNBANI6u8DkhDqcoRs1/4JtVj6nUF7hxE3Zk7H92n\n4SAPblrKO5DgHLhPG6tNCZ5kYMoIqVjuMOdm4A2mZJp4eekanSrEU9CqTm9D\n6wXp/Dt2Q82BldpWZSq1dvthK8/B9bgr1BVIwHZZtZnJUfu+NFJVv63iwcVF\nSzjwZkkXv4yFFJSLoYu8doC95WgFVuXEJ2F5NeynImoM75MpnWvaq18Hb6iV\nR+XW8pzqmwPiSEifI1PlP8OjIxWMV+H/fBTGoBQagA00Tl5AMkygyGFhv3uA\nU/cW4YAN2z4qUQbbfCiMo9FzVhrwaZwjCk1mOgpX/5xWwkN1I6BS43PJrgdc\ngC4BPAp3uNKn9+ye7Um5R0cM4hrQxH3XNy/dJLtPnQr0DR5GNHzgq0RgyDCl\nmOR1MwYHSPw58SePrPX0Si8Zs9QwGP9axYwjPk59xwah0ZN1KhackslMddO2\nqvnMKYVbHqcOhWPpoKmawWhhfbGOSoQSYB4P98IHz6YCbX3w/hxJs1QKEnF4\n5KYJQLGVck6qpNK1rel6rWjr8EjqzmGeZZSusyd0bvp7nOeIopC3ItQRQhaT\n1TdS\r\n=3Zaf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzdDfD6vjfBczqiVdLu3vHDFBw64a6LylN3He/Ulj7iAiEApfxm8GcYirK5Xu9Ka6tn3lvuxF76tLb5P42bQTlbTSw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.9cc95c07.0_1597713410977_0.10344966119773225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9f65ced3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-ripple":"0.19.0-canary.9f65ced3.0","@material/radio":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.defa599a8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XlJJpg2zHpbJ02tOCsDeksn3wlB+Pa5cLSQJqNCVQbeu2X0b71tZo3I/iSHanrU1gA2AcbREP+5pg3GdHVs5jQ==","shasum":"80ba117d62defd9161ca157e49780f03d04fe300","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9f65ced3.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcSCRA9TVsSAnZWagAAODIP/3gVV/Cgwac39HPGOHKg\nPM4HmhsxKRnEhJbQoaT8Pfdd8gmYi/l5sSiTxWdsBoHNXQOQS/9NBdiOMptV\n7wHD88ohBlcH79TcWyIQ5N1wq+6XqouvbDOYBNrfqxOGgXp+wMvGkTI0ORSn\nd0cBtpseruu2P0elvtc4AJjMjHpvbucK1s3mgomfVT5TNWNm+H9v0GxYzJU1\ngURg7W7WlIm+YFt7o0HNoSNVq4oYJV/UeNj9SWkZ3eAFL2BtMy4SiaEQfjQI\n9fkrM6J8mn1TfFf0szSYXvFN2L7vD1nTDHA62tM1lJp1W33GlQpJAlq6Oz83\n32YN0Y8mQZb7Sc31EApicD8fU0wcF94b00MbiaOagnxP7yI9UT+6zEN5fNse\nFkkXH/tZnrGm6h9RspWZGREDJbs4aCFgm9TY4TJWX5XlWITOJBdXKwDnWmU2\nGnPG8suKQDNY19tJMHuPH/ZyCBuYF639XAe16v+qA1MNkr6zqy65J4RwHI7x\nb6S5MNTMCCXIt1CD1GSK9IoytGNgtzLeo/Zn6D1k5pa39jkz2rbn/ryy4f5M\nj/X257vTXl4UdZaM1tu94h5DVZ2z7uEmk+Q+fNIDYCef8eCi3tUiONBD0DuN\nKM0Rdb5Z49ylhGRil6CAdgPA7lKfa8DbE9PStQoFlEkBeu4De9i/ULZf9E49\n/kjj\r\n=LMCb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiDyiOgrO9UkWfELUMc7DsepRD/KbrIO25RkDiF5AqHgIgJLj3qssG3vlQKGRmisVMTD7nZFbXAXtZYUqZ4HzZZ14="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.9f65ced3.0_1597781778279_0.4028932996996266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.5962b365.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-ripple":"0.19.0-canary.5962b365.0","@material/radio":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.66b8ed7e6.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tCZsIHzOG2OxhVI27jogrYJtoYRObu54kyX3dUrpzx11xH128tI3Thi2gmdtQCB0f5VDnpfWC+by1rPy2QvYvQ==","shasum":"48df4d15dcd18f195904f51bae97de09ff0b36fb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.5962b365.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYuaCRA9TVsSAnZWagAAwc4QAJvxPS5ZGhhbbXkjTLxE\nMyHLLJ0Si5O/O+lcP9cT5bfgr4LHDQzhj2Ic0BTyKlNkW11ZdddYWJMHkGNs\nPfB8FjzdGVMM9WU5I1PWaUF9j1MHLpdHArpPLBoOvSXYTcJeM9qsDJS3xLse\nF5N0LxE45PMC7upo62inZU61DxQYvclBTL4o8Fp/Q93IdQKsvYWAgg+US/up\nH3UVoi+vs2nL/lu4O3MdBHxQHJqyfN6U1SQrTgMZukmrAX/iPCJLTbbjZgp0\njmXpUGAZH1jXFrbVfl9U4LjBMRCsu6FAomiODVzkLrq2kUkSGiWZ79Ckc2ha\nQpsthV0NAbzMi5mvcN/XttUjuZVmzJHehqJksMFGGqGcVuP45W+qMgP4x5QE\nOrS+osPl/6gURdcA6EgGQIMDxWz3Y3CIoQX5mbtNqdsu/0TodkGBskL3dMWw\nroqS7R1VSpS8tyzstY3qmJgP+LXVHYd9pr/2Moll7zrOyG8pWv147FA6VD61\n5J4+Z1h4K0l//zb+URiziCtjrIdS6fyDffsGPwNNyIRFpz8WhFTCUC9W2YyR\nW0JJJTcsAz5Dt8pk0SeHYjxAbo3U5boJtHW6ei5LodklWKkyl4SMwYQV5EXR\nb+fh+WxsQjQFxdRj0ru69iulMAsrYQ9yLt/9o1YaH0pGOkj2mH3pAzFdcX0s\n8b5n\r\n=pKtw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4/tkinxlH3yqxc8bcTxCU/9wj2NnqAcGOh5Zu5/RiowIgJAf+jm/evf6cWMhTAgEYDocFHOqQKK5vpbv8xxPTVdA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.5962b365.0_1597868953569_0.6126458937862682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9c9ec756.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-ripple":"0.19.0-canary.9c9ec756.0","@material/radio":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.da72839f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gPOyJbPYREFCqGCvNHQsb5ky1i5tmq6wC8ZG/eDywf8hWtP0TMI7nCdNbqB0tEIdODne1UMfJXszfiw0jvzB6Q==","shasum":"ed7e5feffc3ca16e70ee0529a7d71057f26f30e8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9c9ec756.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdDCRA9TVsSAnZWagAAmfcP/2PITd9dt87zL4gIVGtS\nxFt5VfRhJTXFdRZz6ZJy3we9hGuIRHtbg5QC6HD2hQBZQnNYA5ezOBZO/Weg\nTU70y2DMBdpQP3o4cy8UjuJzIcs/5L7oYenfrYZjo3joocyMphMriVuRrYMe\nxhpAih0GMY+FF6K95dLwYEssrEcAwUlmME+8p4Hf9CAgeq/1Y/lEjl4hM74R\nsw4QEJTOe+wdyXmrGQEjQDDJmzrKnSO1ib2NUGNI+NNMlxCpVol35BHowvyd\nhqwtbixlWupzpAaI9Vvfw50DcM0r0r7FhDkzr1SdRzMnY/i8wr+H6VlLrhbL\nFkr48Jc9q1yJwuePb0ZhpoKIY3vV64n112jQFfTKXOYP/0wSNyl8TYjqf/qT\nOzuE8B5UtOy9JeU28vEPiLfCfoOLXqLt6p5lPOekuuuNVF96IG+dRA+k8Wwu\nOyaC2dPw7E7v7zfskawUu5gn9cI78n2xbzaBNAsHywdT0h0atj843lzlqt7L\nsx+7s9+HshtgsNY1b87RdTqgtJWSfxNBHVbdH0dghPrgLJqJ4vP2iP0VaHs+\nDYxgGRFLoAQlju0QxTP3FJKAXxm0E0YXFY2fFDdEXVmJcbzAcimP1EmAFwb9\noJ+QA3DQui0SoNgg0anVBVXfXmkgnrLQw6sYYKH99V572ZZgrdWyUgOIw0If\n4GAy\r\n=mAv0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuXq3Wr8C0DoSyhC/7R3pHprwZzV0+7itRuezxaXeNmAiAQI7ySsyMyT8zgJNZoGKrJheELV/OG91FFdxKBwIRmDA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.9c9ec756.0_1597949763120_0.14759076930876058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-ripple":"0.19.0-canary.fa0ad66a.0","@material/radio":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.da72839f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+ztrLA5CNYpxYE8AMt/w3JfR2q35t1Cjun/yLd5nUf6Nq6MM39mcsNdzkKDxCjRFNNavQepewWE864jcg95XFA==","shasum":"8408706b3c6aa0799e59be76fac3a436d9e797a9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.fa0ad66a.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5+CRA9TVsSAnZWagAA7IgP/3h+VCzA5xrRPAhKx/Cv\nzI+jlSoOQxZT1qIkZcyDLiiKlNVFEfzaiC00mQPpwNO7dNFqhXsBwqDkUOHF\nNkBC6k56PsiRug7vSKxSdl9aLMzj6MixbE5R76ee2bQhIPQVChgqDYhV2TOc\nWru3fs4upXT/8ja+fl8nfkqDwjsNeeR5qLh3mTYdRvif5sP0QUAlMyMfopUa\nrLjY17Mwh7Nky0HaCx6J7lfG4veuV16novNIzV7g099CK2s8iqc46ynBjFpl\nPvLNI/4LmxHVUxLJ/yMWAzemUJ5bb+eu1DtFha/oHbGr+GUIVDd7lBOEj+OV\ngyQz2v9jxTsAfkJuTyYj3HbJRVOk5ljxVhHPB5AuoHycG8SseMt853kwUqIE\nSi8ngqxZb6shHKt8hRQXTr8fiRh0NC/i7Zgw6KqaeXSrLmMcEv/yozoIZZzw\nI6PahYGtI5hRHlMCCRapiw1nFTdMuPje55Ij1zvp9pjtnfakv0vTAgTphHkb\nO2v3MNgu8SlfojYW3q/+MVSAW68qgawR+0bgL6RGVQ2w2JGICe2droEaaDdk\ncMtsDxuw3+kqgXyMOK7lsot4VWGUP+aZFFlEyU9aTXCD+6Hl0+voaf9GVfso\nJLv9M0P67w6boqILgVoA80Vdml1hvhN+/IPibWp3deWnQaaVa6tWcvjsOFxb\n5LMY\r\n=g/HD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHM2+hlLdanLIY9LHbniWZXG4/OqQNafHguiSXcQqFfIAiBe5AHa/2qvyeRIiG4wyHShS+cQtft+OAXW66as5KmtsQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.fa0ad66a.0_1597955709425_0.8360086570848639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-ripple":"0.19.0-canary.06ecdd6b.0","@material/radio":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.da72839f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-o3PrlaG2lH+QCLBDZHvRI/C/u0gpzxcvayF4RHFENFMO/lHJDbSu2wHDaKqOV/fFh9/6+vxmAY7FPtOcUWt7pg==","shasum":"18e3b6be0fe632e5fca5a1bcb374412f2bb904f1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.06ecdd6b.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxRCRA9TVsSAnZWagAAhUUP/03juZQkXd4SEE1nWVEd\nkslEeL0DBaOBp6wwn/5YVvxQncWSpJ65xJ23ANS0LME4VkKfyYARGEopWeM3\n5IHN+eGok0MpN3AyMdlFvC9UgImy5Kynadw+xXvasGdP0AzUaeoFf+h3F698\nYIz5f61ewfJYC/DUuYrIoRbA7KCOq9x6Px1fyA/p2lahE3qumXPYl6S9Y68n\ne4+D57bGkuT8mprmWS3vR+xpWNc96X1bKNDGUsC3Jsv+dw/pRkbN1xDQP/oT\nYWUS/GjkvNwxACQVrJ5hwcSH9wRi7sUZI5Acr5GvHX/pcwpSRb8YqgxPvafj\nqdTxuthUZ3d9WmYwkvcNYzSJOFunNqRVwrwKyfh8K1EjDoLv48XIs1rPK/gO\n+h9dOtJT//MY78nXV60TKm52iSPiotXTiBnq6kqt7tNjF83hSwkDUZ1SQloB\ng3SrKONjomL2hTGlgZ0nd90QR2b72nPXJ4P/DsB/uR2sJ3ZH+oSjH+5HKiVg\nmFzlN7GT2RojkMnbZXYmWRDr1TKJpztarw2dyeSyFRRj5tBl81z9Cxerz2/W\n/Q7u0j1MR0JOn6Cjk75fKn7aYN42jIRCZlcIbR2Z4mpBHAU0C95BwrfcVQJY\n/bwHl6CFTTsKnMTtIUztx6I9HcRFrTknxuXDi99jfjO7BU4F66lm0dRWmfU7\nsCuk\r\n=gZFn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICi+b1Mc0CpNz8f53HBFfBmGhsvAx+OcTSa9Yc8Z8UI5AiAIllqN/U2N+fo13Sc3Aa+f1UaPQNhYje7yGzONnEFYJA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.06ecdd6b.0_1597959248752_0.670530453045789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.2bca2318.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-ripple":"0.19.0-canary.2bca2318.0","@material/radio":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lazqMH/EVs4SANkqaMNcbLQru+ZL7t8Tu+utLDEObxzijhta0UgjUEmavdm6ctzdDS+ZWeWXpg4EYnkgXs5pqQ==","shasum":"e6d675c78e66eeaf1008ec3badaca226181bfd53","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.2bca2318.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnlCRA9TVsSAnZWagAA2VoP/2QV2GZhzAnz/+sgC1in\n7St0MoIr7xvunr9faF9yXzlbeRzwlBNk6heP0DWXNNQ5mPr84UVK5rlzqti5\nBP/qcOVR88tky8xJw18k8vqSgvThiyQ0gqKYrMCk4yLptG1GSudrMjLD/a3S\nibyhwKGAcCBw+jnAC9zMxH2RZkizh9XiIvFLnykRUjJINz4V+h4YElXUGEej\nP0KHBmogMpfM2ObDs505fBmJa+vNs/63dxZLxv/vb/Ha+FM//kART3Am1GSg\noxQ0zAtZ/WexXqy0NEV7KiBRlGdlWDihPJzYJYFWGLL2xedMTwibcL5AX7dy\nygWYM3CnMa1EiXj8gEZiIu5eACNWeG/jHXzCdYxxtPLofdUFs78W+r768gSK\nhwNnK9eqAWWiMhg40LAmpj89P70DkT/CaczxeLkjiJGvnX/krXmRRIeI/h6c\njJP4qTfZdXSR5M2kmzlZRueujT/5ZjnpPz8uKZ4vhcyGZFjhelW/Xi/TEays\n+oVzIifYdtEqke+qm8eH2KlbLnxTaCfy2lvplwMuzLq/kIM1vUEXuTmQHsHT\n6uPZGiApFvieL9JMHzKWIg9gUlJLP2D6LkJOumk0ZUWoD8ars0Oypn7OIFgw\nCa1eZOxld3scaq6+hDjakRLLIYoksJ023W675J5FRVeAb7t2QNbh/zynopeX\no6XQ\r\n=eBKV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm/yUqkZcvc6D4GIIO69695bmQIuycLq9EaF0xmzjlRgIhAKDpM8B9zf9rSZQJFkT4YRz7GbKjaLabgsf/bD7GtffV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.2bca2318.0_1598032357196_0.550375638066513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.6aa47265.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-ripple":"0.19.0-canary.6aa47265.0","@material/radio":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JCIUrjtxxsLUuRedpF3YyIAYRjCkWIGKtexbgoeYhobBHbwZi46b9QeVhGccgYrDu1Y+bD1a+KJ2Vp7BCEzjAg==","shasum":"b19e28124c86f37273fcf882a145a3a43200a47a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.6aa47265.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9vCRA9TVsSAnZWagAAHuQP/3PULBBdRR1dDKHja+WO\nVuAt9wmrFj1mM2ufE2oUDniYleQUEVQz2vRmiW5OVKvmbK8oqzBbx7oUmPUt\njPg3fEbFWZ+NqrA/z4AUiBM707JcC5d2+PsjmhSvYakvHyieaSJGTY83Iwn8\np+hEl78YkL1Zxbzf33DelAXoxUEcGm7z/1YleRs69XzXguO3sxGHxHHI1fsz\nWMK3fvZ6R6cy+sSO1XZScfb+TAixG4/kA99znOwvayk3haIYcFNvpXAo7XZO\nT5k4fbY8Dd5IvaZH1McV7EbedR85nVJ9IXc21s78od55hl8p0FxqKAjRGyRu\npDbuHcXGDD+qRj+Q6x5dlpMYL/yEVAAz+b51DxuatgbiiTULIaKwF7lJ+frx\nMLtoUhqZzqMwyoPOBwnMke8GozNno9aN0MP1I6JrnOLy/RLVqlP9efZKiVpX\nSUz67R4LdJdmcah7aQYoUY5OYdwN0JF+ELa9ZuMGWsi/gXIdninc4aK7gwDV\nZ5ahFOJKpUWiIWrT7cad0e9YbzO6U3RdHYhyN0jnLLNFGXMDLA/gx3XaqFtl\nAYF3acF0tjiD529D19C5JAzwlXJHfMgChieIzigvkWrycL7K9CZ+yodp0em/\np0HjrMd68CbqyVUQQG3AClZcwASZ5PMwnxN6vOhDAlxfadUf/9A8bebsW3Sj\ntcMU\r\n=XDJ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm5V/WVQdFL5/qn/nupIqfvfh/tHZXsy45tDy2asd8gQIhAPqgBC3pFA2FsHzrAPi7tSaab1nMYd3X4g1+8W0QpwW0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.6aa47265.0_1598033775485_0.3741118767570497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.e7202a07.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-ripple":"0.19.0-canary.e7202a07.0","@material/radio":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.95e4eeea7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-r7Lop/jSf9zPj0klFBOJKHWbUDSZ7/nRnA8f8Nhhh4U24pyEtd8DHzSemvRWllcqNp0tfDPi74ITTomUe6mIpQ==","shasum":"0c9f0b4df8b52a5bd97f31168b249798dc63de3b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.e7202a07.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9CCRA9TVsSAnZWagAAuJUP/1ym864WrICxD1GLr5Jg\n3ZKg5D8/D/Ds542JNDx5mv/DlDjfKqRkroq8zlKprS7JzCifbg63Zoi9PXQW\nxyYl/vYtk6KLvpmD+/SGA6YtcIxc9GZZ3ZBXTnXyI8+1V+bod0mzoVrMblZy\n3tbak8huJdMhggACAMel4srbENN4WDIfz2X18HUBv4RWrK527PV+Sz+IGDjT\ng2I4XGGT0sTr5TEATBJNu5lKftMjS1pMNXI+PvxZ/v4GSTietWf+J0Ybl/Zz\nXdoAnybcscQnn4FPpu31pCYnAYWpQ+9Icd8aCSd8KXH4Za7lWxloBMUm5bQq\n734SMACvH6HGSoBPbYpDsOHLZFs7vf4PtgotbphLBENiioQiPbnHhmtkfSZA\nMEgxLQp26gg3SF0L2DEQFrBRTPP7edna89rzPIfwP8bPdePaSgJAGQz2KXqC\n2z4DyqNZDT1oiy0jXkhsKg/qNhor/ViBw+X1fnF0r0VxYXdVl6/qhZwDLaad\nE75CSwfOg8gBVfshNenWnskjG7TVaWfYnuHb3hZEsED0BQw+F6qLQ+aQa+qp\nCjeCU+PbiDp2fvNIziF5W/g9TVH3uz5DCgUVP6nJQzHi4UuRDBXvN77q5Mh0\n+on5Uf8G+A+Kx8+y7aoxufFK7hGU262wMFh8I0Dz2mOf9feJWKW2sLO4Sw5v\n32R3\r\n=RCcV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGisNCwrLOUKLoV4VhIV8r4ykf7lTh9dqPwEJVGfcLEdAiBfuFODr1wC3yJN6fouuYpPqn/Lh4KufVa5swpOzhdIqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.e7202a07.0_1598037825657_0.18846702994307996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.f208201e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-ripple":"0.19.0-canary.f208201e.0","@material/radio":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.238216fc4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9W07T7RWDRkuOcOhmgCqUFwNTGSZfc516v/cmOnfIzuA2YjQxf/093C2zvX0gBdS64zhA7frdr6i+S++li0ZUg==","shasum":"f30a7d194c49d7103cf381f45719b8ddc9659e51","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.f208201e.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA77CRA9TVsSAnZWagAA3ZAP/Rt7olajnMeCkE4aGfb5\nTXJuvga6uotxXi2u4xRfQ7o8bcBZjYuZzTmRJqcpcZ6Y7M3V0B3R8RXxZATT\nOETxRTOLvdVRTks0YzP8rU+ISZpAEhQ5GsPmvevDAt8LtDpYzvgmm5/H0/R3\n9jbtBmdWofnAnC3BEMKuIs7uaAi6/UHdLLH9+QxUmZLZSIBtRseguJLd4vBV\ntEDfHtaHgnXF0Eb5Chb5w93QbHEmqSlvYAEEaLuBsoHQmhl9GOV5e+X2FpyJ\nWNB7OynC1IRPEvJeFq7OYnmr2jMgX4UgRiHfYom3Ap+uHWdV0M22OvhO8XTB\nK4TpwGiXMo0bjtXGLWuM/Rc4hhVCGQErFbtz7axIV39egyxFwGgPJqc8n6sg\nPyf9eT7eFpv/UT2YVOyRD14SdD4Yq/RPrSmTh99EXeA7jGpe79iTCtqu2HIi\n99sCGZUEOSjNjbVCngP9GZ1wi/T8H251BhZ2+F5tJ6I1MsVjVY6gAuwK0puK\nKEqAp894d/63sXE9q3Er9ZMqMq+O2T6XfgU5XPV29+9Ueb0MyWce+1/E878q\n3yGLwxjwSQ1GZxXILH5ifa7LjIa9ZWA2ZRE531xvGuCNjEbcffhq+MnQQyra\nFiDZ6Ovkl5zUHYCPZLDVRfVHHa0D8XXO7tGdUmfps7O1ppcsnK3vI0LCrzMB\nl1gr\r\n=yKbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBNzU27eBVJ2NmfH/Do3geT01FD+OqkyKQbOiL+btb5wIgdTa6N9p3mqPRdvQ8vqdl/NXKGGPjYnSy/jVM7HUshGI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.f208201e.0_1598295802842_0.5983458575047411"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.14a172db.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-ripple":"0.19.0-canary.14a172db.0","@material/radio":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.238216fc4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pIZd3NPNveh6i1LnSr8Cl8IymbN36+NUKEGAuWkI+kwZss4hNWxfjiLDbX2V3WnWgLAOgRKrlbINIqfgFupN0g==","shasum":"c365068cf762dded97f3bc06ba4769764de3a890","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.14a172db.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrzCRA9TVsSAnZWagAAesUP/1Ee7MZOETV09IfpVcpB\nAu4KLZ4saVoa/DcTVLQltweY1oF0Q2XgJkob6nZJL4NuHnP8eRGQS9Ojv9/A\nshFwmmILgXb/6lOAKaqiIHuGh0NcuJu5EL8xbWQWLSjrNDZsXi3FdUmeMLl1\nmQlmlq/uELAWYkPKmq4py3nwt+zH87UBYokydfE4P6FvbG+vj8YlyqqplP5F\nMkwBiiMwvn9TfH9foo0A0J+TwtG16Xxtgc0MHflsY+Zq8xJpKpCq5uWLokCG\nskPSR70Z7IO2Ucn09StHWoIZXRImgD7HULv9rj6oT0hqvN3ZoYOL6iiNGOTv\nsfaVMnTNJ5BDlMLvKHRoO0FLQI5ZzUg5We6WH1kG1vdXQ7NQ5DmAhG8pu8cw\nkCD5TT3uJelqJPztH2BDMEhKslRssD4Tu17qfpdMpv066AcEpn6H7fSkznNH\np+mhcHKPzx/M0iEcjKKMSz2vDytNG/DsXS/BH/lgQuNGsd597WiKeGZKfeqK\nBtppyy2gT8/hrbo4fmzVbab2gYVND65HqDOuZaLCChOUCkMun7iBOf5McJiW\nr76DGaFSlKkPpjdKhZR4MZCFD2G9gak4kHYUMQMAD3+9upgnqoku2MOnv+Zt\noObfgqHICoWmo8UJbKLCSCGOeUJ30xLVeCnNaojr526wylHn2YO+Od4ybbuk\nTVyp\r\n=QXCI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwkzLhHg0QvsS53DnJr2XX+P2OWokzu40qEAPte+iabAiEAuruk+ooXLLmg8oc8vl2Kb0VYAwxBbirvvc8yIayeI7w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.14a172db.0_1598384883424_0.7341467868078351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.e6c1038d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-ripple":"0.19.0-canary.e6c1038d.0","@material/radio":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a1c65593d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ti3IU/KIP2JTh4X9WqG0weHcvZfzDNboZt/RsJisYNLHwtZRgmfFCFYyY6DF521uB4OGQJg3mZISul+BJwxg5g==","shasum":"3b2cfdf8929605ef8d2eadb06596e944a24234a6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.e6c1038d.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtuCRA9TVsSAnZWagAAGb0P/iAGnDEGhbAhfXwb4LUe\nQBXfIYw+LIs4VWNBjSP82nQqs74XUeZv4Vu0xVvV7+XImOLJhkFQoCDCxpwq\nXqX38fojhrves5aKX+VkEbu23ZGbpvDHgsyYWCmmNdiEUdfE9iMn3AerjhOr\nntUzYIgX7mVSXfA5rLHPhF1hpykXhzTCfQxMbPP55WXFSzH09V0dd5RAkYeY\naWFN9m3ba8uYF6n49kiAxrZ61vFP0uqewaFXOm0gSnAlIwGmjFzl53RkqeYT\nt1oDC3bW1e556knBqYk/5g9vbU5OeN6A7th7vfN92TsLhxblZuayS75cDNu+\nSLUQixOmL8uiP60n/RE1GS6vE1DRGK9mwj893yh/V0Rp0covQWJHzbFQXV1c\nOt8rPxt8GZEfSLUYOftWMGvh8qLHfgW8MkOd6Xd47ysS9SHTNRJd2+QINNDJ\nbAlfNu8b4IPLhePb993ElC/NFo793cJ5Mev6DdDRTE3Ukysi/wVBfK6d+QQq\nS034s/DVF2tkmuR0JtcJ5FPdtR0WBOJvgOL4Ym6IGIyzimFdDdUG+T0ZeL5o\n+rGfPTMSFtwABZ4IG2uDsBiMg//waUo7EV20aPBjWjnfS9UgHMlnRcksAqnD\nfOXV3QHs2T0iPbmacGkKj1KO0pYy9L8/NABomtZ32X47tBMKBwGiNxfzWp2T\nsQGe\r\n=ZWSB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE09HFOW0VSH7ZNtdOgfAUOtAD+L/P+Y7yd2wXm5AR3fAiAZ5IOHJcfMiIwjGZsN21QnSCoBEc9ZXUlWllwrgDGr/Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.19.0-canary.e6c1038d.0_1598557038131_0.907300403057139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.34012082.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-ripple":"0.19.0-canary.34012082.0","@material/radio":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.238216fc4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+IbGQVGw8le3U6FJmCB9xk5c3khB6vPXFOz4wz/omxNJnYuXyYIxSsFu4AtSVoKkniobnrk3J3wEfLfP63SWjA==","shasum":"814612b9e0dd4757e59c3cea77fc95eee8e97f07","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.34012082.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4RCRA9TVsSAnZWagAAfwMP/RNPKFd9PzK5jnJSse/o\naUl4XqRz/bwACY1sgAxpVXilSRqRe1KnIbHdwC6MfD8AswTlrRQqWG0O/Oq/\n+N7NxXM2uKL/JutpBcnav/QTfrnxtg9vpM0369yiXBshENI3TPRXHfBVfFA3\nhH7RJKYZPprT9W2BygAbusHUQtGVTdiqaPtP1g415NhgvbqRUie2yeJQ9XQ5\nzGX1pcPugH889IsvMTm/fF/4SoXRmKSDlCPBb585VQQkrtFS46m08xL4T50q\n27I4cTSCwRKVSsAcq1mznfO2a3eeXlfG8HCAWgpzpfTK0jDsjyhDYPbT+N3w\nRvCAzCoc9c74wCOuxD87VYS8seUIBlLZcZ0xB6vcPXAApTeAFIkFohjMQ+Nx\nDfgNCJ29zOsEdKKRBbIVZ4tsPpfigYDNEXT60b0klCbG8AyVziUvd5kIx4XX\nm/VwLJ+o51L7Oi1x5FcBQyWUy8QFNxmfuu44MObyXdlaai4I/BgRCeYVXyDf\nkThoqou94KGAkO/3UD8zs8SkNHpzSJoyv/nXQ4l4dGAS+INFoXChZrdXfBT3\nN3B741OF+IyjKJncQbZcllchBEAX6aOLwbNaRQ2AUAWennFkMe9sXvgXg7P9\nFiOwKVXgFZTlnauroymhdZVFTMlWIitM1Thew0qgehAmZpLrpe5UncN7cDWn\nQyYh\r\n=39Ym\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoTiJjifBvWmy5lbsPNAjVVEPVeS5sc3vK5QdfB2dL8AIgE4+IC1pyOH+rGUCTMWJhHsRMBqL7kle6MZqzM39YOpw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.34012082.0_1598557712760_0.6643516093484152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.c073f7b8.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-ripple":"0.19.0-canary.c073f7b8.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QJrXDvsBfQ3qzfqyhK41L+Mcd3pxCX0SR7+RjFrUwOejp5ugOZXOiSrRyfsRG/HZ3LBVjKsiGu7a6Z0XVYjh0w==","shasum":"0275d603c774421f2749a439eed2b5106620eb22","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.c073f7b8.0.tgz","fileCount":20,"unpackedSize":115168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTr2CRA9TVsSAnZWagAAw8gP/3YNiP4qK+ik/V+eIH4d\nLRVv8sKyRa1kAZPAPG5D02Yyk75/Kl3DZMhJEN9ENs1h7h6UmMyRKoQSceoF\n6NBzlr439pH8p+NXLLieey5fOnLj+Pi55JOCA5GX6PlCvo2VBnuuw8MakYOX\ncunlMpwyddDsh2fqjbZPS5iJsQOeZzfKGVS3p7NAIgaz/wwfu05Q1QdzQTCW\nJOZMH20suD7cPPmqo8mSZwPkRo1lqvjug/3BnXN0HvJesFHOPFl4AO4WoiY4\nY+Yj1hpXQ8DygD/omKBEXeXrSpMthSiS7RJnVqG7zNsw95yswsbKgGYcX3tp\nzZ/EY0EMna7wmCrhxSV+1W3/trY929S3rG301O2elwIuh7o1dESzZf3nDpBt\nzvMB1p0XlNPvVud8bO4/4GFx70VVnASTBYcQnIxaVPmXjf2v4vVsdawmBAPj\nr4TddXoI1qQBC4s6MQUXDAWIKKgFOh5/omFKQGFnwSn6dVpqvD1Vs270aw5K\nshugnnYIY9Wq8JPhdoFMzweUoTomhATF3TdoLiZebnzmpgOIauw9OAnkcdDJ\nEoYTrpenpm7lOgDgWyNbzKxZ9j07KUr94W08HQxIFqvhyGXw1UOORazWIikn\niw+aVndJs8baBauiupnhL6jelLXBkayLQecGtUht0rSFnhob4vukxIpV9Edm\nOF/s\r\n=d41f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5MeO92Sqy+KmNkzd4OPYAlqQimXGfgQ2YZv4/CP9jPQIgOx1rYN+DXEMGQbO2ssrOcemnfNTNbCsNdt/ViCb67SM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.c073f7b8.0_1598634742253_0.12116657415355525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-ripple":"0.19.0-canary.b7ae68ff.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Xlq4wGVz17sF0ycabMfanRpsJWf/T61JgyW+ympX2uAq8JeRWloExIECV9Zod6yXcifF53Tb3UUffMcFVBM4kQ==","shasum":"5bf057df3ea06556819fb9684f59548f91033c41","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.b7ae68ff.0.tgz","fileCount":16,"unpackedSize":89513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa72CRA9TVsSAnZWagAA0doP/jQHPdgjPpOZDA6cnMlz\n5VcxaGYRhXsOk74BlgerK1wjmHtHSKCXdcG4eBllt+cRLMQpomVsCDwZX58R\nFasqt9sF7n59PcfMAD0dZ1h73iKu/aw21Nsg2TA4t+USPMtYGfEum4UvFOpK\nO8pbdCljDjyVMwJs9kbbf0PgZ90npwzfbtZ69ALdu9+YVQS9bHSGA6fU45R3\nawjH7wqYtoLjVu0e5ihxbdXw/cueIiKGbACNDWHWKOwNIS3VTkK8yqB/1rSP\nQRX6wB3bv7IZXmwOGAO1SACI0ja7WHhgEOWmBLOxFFAIy+SPAm03vHnKYnml\niW3PshwIJvJEF/L6AhY8NwgGY1i8Qc+c2Z1PS9FAv8GXAy/v/Ih/vKmyr3Zh\nNeP6RSXh0zACSIsHzzLn8wkiSM12QvagCoCMrwjDsDl5lPlsj6c2olNwxnfJ\nTIh/wXjVj514ihm6j8OSs5nvCbrqeJE30EXr1m66JT9s8GRn5pEdnnUHjHWA\n8vhOlh+6mcQLRMXXE9HsHDqP1HyYgJDBu8rOcgmYIPPAYfGFSqZ6Hd/YpVuB\nsz48FE7/ZpWno0AKQYUQWS4Tnik/OsSIpJgQ0ogXlqRG3V15e2vVbBxOhYMh\nFPve6T6PZ6Sytng2Z8TWgjSfAYcrPQA+A93vjWi2nhj4qDYECoiePF3wnnz/\nuLKp\r\n=Fw5i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFglA30Okn3Vh+jUreX8ZVwlF0C3a9SLRLufHuGJ08YAAiEA1Av45R6xkVpe0B//wOlfg2kBKDOpbvxcy6s6S+AGmd0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.b7ae68ff.0_1598664437871_0.6842995847863909"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.697e3879.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-ripple":"0.19.0-canary.697e3879.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7ALEGGfr3Bv0zjbFw4wZyuuON8ZC/AqrretM04j7o45pGImcImS29yhhnLg16ACKlEErl58+il76I5JbBytDew==","shasum":"264192c9882d1b673a950a03cc620c3f1ee66423","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.697e3879.0.tgz","fileCount":16,"unpackedSize":89513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOjCRA9TVsSAnZWagAA33YP/iEEz71IZiGDLOpuMMaS\nBpZt/erDuvM4hUG/wv7veW9hSpKMDKE2H1oakpbRIQe+O+emeBOVCky9i/V0\niDrJh7dy50nBLNZoN2f2jNAMONoWWVfXv3IVNjsOkVH+A2YXlyEEw0dv7x8u\n9rHd7kFwJwK/qKTK4qs0dby9lxRAFjyM08YRvqQUsQyT1aguGZdPvigvDxg9\nj/ylNn0fGbpL0Sm0T+ua92gk3iCRn1oj8vnFE5ewy0MBe/GJ/MfSV8+GpK1p\nx5vqRPghEhlzDRF3sLuOFZWpcizlyPVt2cxPizqAJVingqi5Arc6aLZ/0QfY\nM1OKN6xd0hHNY8tC6hHH6m0mEFQjFLsdsRdsZFNOAnxsxWftuhGwAGXoRq6A\nlHVymGJjasmg7BL5kp41/zqEQFfW2pk3Y4SG6vbY0ovwopVs/zH+x/tdvgxG\nVJ6YkH1jJPTDGcnT1udaqNLoxAqFzBuerEObWZ9J/TKbxsEN1RVp5whZHsIn\nrqJ+RgG15QzcmlbJKPq5f40XPLSHo8WmuBbGWmcX2m9QbNJSnuXfITwuRtUf\n7KyPzgV6Oj8HeNOhQXzLc2o+ZvtaFTejuxoqU6CVhhuAJ4YZfXUEnSKKc9hI\n8oRRY+LBgNghxFi69wLDhSOpBE7gcadgtswE6Y+1eSHVAVOeq4stSYqDTZd/\nhDZm\r\n=1qcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvGHbmUiM+zlzx9GRY66uTrk+T14iO+HqrnFvnbIB2GAiA91TkCeIZRSTb4jt1OoZeRtvHwzRvWqH5sOugLDxT0uw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.697e3879.0_1599005603401_0.3253977537106729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.eafb7991.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-ripple":"0.19.0-canary.eafb7991.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gc2Dsb/wtYlCsmcrTNFeIpvvkaHbHiq9be/nGRruw2pYiTt1DxPHjbN40RNLv9yr5ocxIJY3zP3UIqKOGD/CEQ==","shasum":"df58a6e2bb501d477857754d69b5b1c5b48a7435","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.eafb7991.0.tgz","fileCount":16,"unpackedSize":89513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwD3CRA9TVsSAnZWagAAhFQP/joL8OZqrMFUD62W+og+\nH+aOCP68ipR/P+vwu7XukeuzeD2HPV2TOU6eKow5e+9E5fyVnUGjFXAzrfdZ\niZgu+OaANd8XIaK5VjPIORQszPaeeIwhT5bxkJh07nWl1eAKYLz91xy27xcY\ntYw9vZGddbBLcoPOYfX8iQKHkDzXKtg1kG59TbJHcMhBptpg2gV+8xOJFmTb\noCI85pwNrwnqZC0nrfNNRe8We7lJLn35bQlkOyHwEvqb9//aKxW4vOPHAnQO\nim/MqaucRqnw62uk+sZwJ8cMeGVM6gHor7V7Mx/YbNrJPRMRN+PIBrEvkLSD\nfDGPcGoFnQk2AZLAwa37M71uGZWCIvzzGJnCOEk05ADALVkEgjKmpymwQmbx\nPFUTIViTLy148Ssbyyghui/c0CrNRxhAYdPzIaOS3/TALiAexLm4ZgUTNkiA\nTLoX3pcDCT5H2zVh0XNF8DvZCUs/qDCvdcWiIWMVb98U8AExjck6uSOJWiO/\nCV5V/Mr2oGOYxt7cASsLNtH/QHzrZIDVMpkPsfPxPWoYjwjvQEcZnUdQTra+\nOfZ13es4BVfUX8+5srGxAeSm62IbpNkEQs+DYMet8VOm56DU8U9kfKse8LMQ\nhsYK5l5uiaMHCZNTs+1HByWWnlO82ubmK80YOBZ+Q4yIMxWtZno7av97qekc\nHA30\r\n=9B5p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYbd7fK86EJtl2MgP46OBLeBQWiqRkCnJh7ywpTGtNyAiEAoqESNJULNqYdMs/EOvi/PyPhxSeg/f5RTuv/2R7bv5U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.eafb7991.0_1599013111170_0.34761337334873543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.606642ec.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-ripple":"0.19.0-canary.606642ec.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-m4oau0q4f3wTDVjNbV5Md5rySsA7mdSNxaPAR7HN6HjIfBfwIjQaJvAJZimQkqWIGmAlVz8pSOu/U2kebMJ/SA==","shasum":"89aadae08b91f8e36425a6409b3cf64c0a57490d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.606642ec.0.tgz","fileCount":16,"unpackedSize":89689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBA0CRA9TVsSAnZWagAAySQP/0swFekPDuV3+ttDC6aG\nhH618KiZ4UwOa4zHMcZZtPIXpma5i5F5c5NN38Qo6hLGJ18iPjtFEOppvW6F\nZIHSVx1J25VG9tBImKLwBw6Wob3eMeiXJG/0fjheFavvA7fR6XSEZ/5wDGAl\ngdyEfNnnP/Z+FG/Oj182GeIeJKrURwbsuMpJ3p9GuhVPlKiNKHX05t9FvY3q\nHXv+4rplP7B2J7Ki0JHut8ykkzgQabrjINeOdLDINBJD/mAit3rhoriiWRiN\nKScSFm/5wG5LjBwrp6L0qUi8N+mrZOSrFOUWIZ8kYDMYJaXdD3mfCo4Wtrqk\nOrg9I106NXu7J+ZqSC7XtotlF/fQuuRaco8L1t+X25EQYX9s1XgvK7g6JGsk\nhp3J6DxnVP49M1vZY0qmXVNAzCZSS58O4WlnVQjiRYvIrTz7FfFMLbRGjobh\nGhJUreCo2DJ6+agrdDRrTL9gdJ4CzIH+GMx2j6oyJX1ZySyEOtNHahsCjodU\ncWk6PuI1CXW4WS4SPZvqKZpu+UWBtHr3fE5TW7BuJYqPg8y9RtIXHAfXkZ+B\nfN6NxzpuaHlPvipCVAuvwfs9L5sGyzm+o7oOQafYM6MhrvMPBuMDasouSg/c\nIMIqUYVgoTnCZq+Jlnm3xkyyYl7/ut0kopVOu8MFEfgdzGLSyvoPKOlmx0cb\noA3D\r\n=Qsw2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL0owDIBX93B3a/hWhon/XEFKQL0B3CzD3UTfJagFY2QIhAIPTyXQG3mAVrsEHEudttAMa9Jt0dt5D5oTBSsIFZ7Ky"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.606642ec.0_1599082548063_0.9561493773526677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.ddf05c42.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-ripple":"0.19.0-canary.ddf05c42.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PoeQz/6BPyNMi2WU+o8/6N/CdvPM5P4bJArpnZj1muU7ryamLgYeOPYztY4/qFeQ3BDrEs7I2M9E+CtOMj87ZQ==","shasum":"7a6e8241d1cf3ef6606cc45f7670199777ddd9d7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.ddf05c42.0.tgz","fileCount":17,"unpackedSize":90364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVMCRA9TVsSAnZWagAAQacP/jSkQFf6DoKBGLVQi9QZ\nQx1YiSUVVfK0OwkYZm2Qhs8Sg6kewPhayCKinQ/SJfblY4kBjUsVnE8BK92j\n9SGQjE5s1sRdZ097mRhxCZaDfHXf7caNTJ9mFmK0RSUzTV6LOn1z4s8lpcO2\nF5t63l9/SMtCpKL/RstVOYcoXu5OdiUUD5Klu7d5vDce/FRkMdMENopU4x/v\n2vUAeH9XjGOyDKtAigbirQlD6N1RqBmcbyOPRxKaNMDg4lOhmgydd6xeHdg0\n/9qLfvtOTCPnxHTR3vS8pClYETBwDNas/GSSKTyNCG2tC0OWudxxjWK7tF5Z\nzSLNnUqG+A7fw0P8MsM7Fq4TZXApFD6OdtPZsOQhvo73Vp4Ov8lB8myfUpZ2\n8hTtIUMkImHrvHD4d/IRjfeY7muCjp6iZgliNjKzkKysqnAhqDsc5meVqr+c\nlZwOdTwVBEiNeyn8syko1o0xE++8NoFDXV1GHBA14TwH8bruqupPJ7Va3ax0\n10qE3yfLEzYEMYoyT4bjYNiXQQIdC1HicXMgrUMJSNUJBMdlroFKylPue7+F\nG9r0mY9CmDTwsHKKlv27tBNvlL1D+qy5fspxNmtVFUfTN5Ku+qGY1SzQwRuM\nMmh4hoQUTXLr55v0xgqF4zcCXUrMabTNdbFzILM/tuD93nocFQO9/05mXvZ1\n+dHK\r\n=JlK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcK/gtC1SbfF9R1c2Hy2t+dBOjqpNSWgG22mjmL4T8RAiEArh+HXfoO6Nct9zHWp97sywGqJevQJoyXRjCOHpjCkRc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.ddf05c42.0_1599141195743_0.2528045342643208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.b889e6dc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-ripple":"0.19.0-canary.b889e6dc.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kwM0F/sjTJU6195VEEAAf2XToe7YcjqxEsv2V5K4XieyzU/c7UdNzk/7UxdpEp6iA3rSq4C1/+ZGN4pflgylwg==","shasum":"91b288b50e093d5cb1358899398e5bb859ef41f7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.b889e6dc.0.tgz","fileCount":18,"unpackedSize":92057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmQCRA9TVsSAnZWagAAIo8P/iH0qpRdjfP+5MyUvDmk\nkgQrqctPk0j+9c+vcnHDgh6R24r9brmi2G7GlWHWSJooq+4Q5stUEolh9JC9\no1HwKvfqYOtYeRv2sR4GiL8HnpQgttSZ4FxbYRo3huxW5LlC3sBWh+z0bnW+\n2oymrE+eNxnxAwknyY3wYtkIi2kflueBb/u+mxaOgUKfVKGX4orWUR4hqOlz\nPMCDZYdxtlyy8bbjogpG2qXLwHapX9qkKq9fTeLycgPI9lnkLQfrh4LHUC93\n3pN/rnP3pzJigkbwy97BPb03ZwJsXvj67/Uwy1g7vZiVzS2CH26mu56gcGrM\nRixXECCsEqdSyDuILG+f3n7rDRUk5CDfwwvK9wZTtDmurZ13yA2wXNYaRxbT\nQw2hzGEK7JoPntSEvZ2hE/og3n8fhRLnp9tIhNqDW+0aLRQ+Pyr358epIn8w\nw72vX/sGefrRBzUXdL9OMihdR+8n9IBtv0pnth9vn7FwSXCTsStOuo/7ujGA\nVX+pMpGWF2KnPbXXNDj2YmJVc+5sqrnXkhlYd65ozfdxZWxM/po/cGlUbhaq\nRLto72OmFdSdjGNIj63g+2u5BpZDDuc0zANjqqf4otE+EfDhzvsQQYraLm64\nRcMj4NyqTM9xYpHUaKdmX8dDWPWNHtb6D35QDT88XplaM3MHQhN5smSnyGpf\nAYBW\r\n=Ex65\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDudHd/wvn7W9UOwwvcFagPbexzYWUzimcUkDN58qa09AIgf8m3f/hmF+Xgf+OKojmu08Q017rQoQaE/1maO7ANzIg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.b889e6dc.0_1599142287549_0.8621908820679653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.aabeceb0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-ripple":"0.19.0-canary.aabeceb0.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FfAtpAe9cgk5UYRuWpaIQkLSIgP8TMw87aML7KifPm8JLn1KiKbg6XfZAdlNR9nA0RmDHDLXif4Ezr7rptcZ2A==","shasum":"fb75691d4573f7a5364a430e4a4579e32997418d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.aabeceb0.0.tgz","fileCount":18,"unpackedSize":92057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUq7CRA9TVsSAnZWagAA3ZYP/jDkRwPTY7pZFLtatsFi\nb0tqgLbVY2QDu8dTNOD06kT7rdQ7pMKEYU4RRxZw6whAr/parQquDNcIdTKh\n0NBj1tGqd9LvevZ8jyML/1t1/5hjYzWE5AeYce4rc4v3+S4mOcOuvVRpSv+8\naaelmxP2VdlkPc+/YcfI8YbtCFrfZk1n+/ZyQS6gXpXU4VCdGMwZQHi6CHiy\nyDsjqirkuojdJTTaOYTtyrDyISo5UYywkeuKhUskC/3oYDxsE8f4gP0jjMKI\n8NE3ZtxJzKe1FNld4QZR9SfEwUPlQgOmq3aQLN2upulMLUeaPt/zeC2uJkAK\njpz0CmPBePcj5G5iQP8vZ+VRIPaouDFc1HfML2QYjkJdD8/5SVJ3m3tMEPXF\nnArlRNwGVLjuVKLGs348oRkcv3fPIQQqQI1ZlXuUAou4h5EGnCE3lR9LJMHI\n7S8siN/1P4griM0YdugMsmV+h8d9hbZTnbPnPgkdkRgP0p2Mzu1vJQfiHpFD\n39gtp6qRfDSX5JzRYTZXS8M7ZeCiYECt5yp3P9LKbu3UNBGP3q7KOOx0RVvF\nsPhwLumMbXhJj/l52CAHW/LjhqYtaEqxFvEcDPGjqzIzFALX3vag+Kc7CPPh\nkea+YjieX2UgPAP2xHI+Bgp1zbzZX/LeVJHlJCHnxwJIvkCSYmdXCS+hvSgR\nas2T\r\n=4FgD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6GLoJBquEhSrxrllN8/C5yNNRyBQFhKJtT4gQL4VsCAIhAKG3cnN6sc66iPnmZNLBalLFDnC6TLtWJRde0NKTg6hx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.aabeceb0.0_1599163067001_0.5000611038894418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-ripple":"0.19.0-canary.d8cca3a6.0","@material/radio":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.911014711.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xp0LY/W918grKAwelqZAzgTNxn/gRwGyAcuU6wwbsbmwTzVTuB5HylFC4ZjCIB8ZhT1rVsu6zFP/50jdrJ+GBQ==","shasum":"51860f88c739df562e4b7a63d156e2bb24f1a8db","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.d8cca3a6.0.tgz","fileCount":18,"unpackedSize":92253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDCCRA9TVsSAnZWagAAA6oQAITgeaEG3QXz+2cSAxP5\n93kH1Ty+ay8LiWWQTZ9SOG2K5wueSOsqpxvxTffrojEz/GsU+IDh5oiGoFU8\now707YT15wPX+Hx2xRAku75PxOMpU69nZzsHnC/Mz7yuZa3y0YhO/U0IajoZ\nslPeGKN7wMvtum9t6AmZnL0unZyWo5wuaX/jzjSYxPT6F+sp5poX+25r0/nv\nnxri6pnM8uZTC+h2wctxlCLlnt+OpwmTvXVtSmxNRS7vrAwfTHMoHi/4PpjV\ndvUkuEssEjMeeA96v9ssY+10GBfnl+H13Q+6nCv9uVi/SqP0FYqtZxjOnw2F\npwexIOlD+qktPRZTrAHj6ein/wNmb3ApWWRKAU//h9/L2OS7Pux7mUcGLes2\nB7Uz5P6wH28wqPMregxUNiuruSqTc01WmpqTpKtk0ipqtBxtutMJ75Ggbtkv\nP4+jAUB/3cEvRKXiZv4ekjL8AV8N08wmRIhJAdLz74Pcb1bR/FF/R9H/d4QI\nmczJ7Ih1x+zrif2Ydg2vEC7XB0CeF3255fDipXORxfEn1fMtlTiUyOGUMDnb\ne8yxQItjuggolLb6OU0n4MZGnDuUy3Gv9FbtZfBx43xIzJDvV2MZRiJ+jTLM\nGem35Fg9GBMfdHORtCA6tTPpxO6051gGL6TtvZG7CbWR+E+yEMs9RMEhTsd5\npq53\r\n=HVm4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKxE5CeaEBTN5oErbkFo73sM3dKqgSPCZtKl8eqyp8DwIgdibQ2924NU9LV2CFWZYJ11u2AdXrMPUSrxte4PsxOAs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.d8cca3a6.0_1599168706376_0.9471148815058097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.26d34b2e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-ripple":"0.19.0-canary.26d34b2e.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dT3oxU6kERjgNX3/Umb4f7W3lHm/2J0GzWlYcposSbNYf2M+d+QS875jW6u6YWTnO6ISsODH0+fz9BwpNgGNiQ==","shasum":"47859edaa2c700d6427966767ec064cdf6194453","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.26d34b2e.0.tgz","fileCount":18,"unpackedSize":92253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWavCRA9TVsSAnZWagAAnVwQAKTlUigd/JyCjy70wmuI\ndjuw2/iKbtf7zBrpEgTHv7HnFnIppD9iqbHclxnF1rZGKd2eGr58ugplMd2R\nKbLR3hX7pnJIqWSjtIfJBanldKheNjhCG93HYE1wDLKLEBieVT2tCu5H9g+P\nTr3RqtwcsNeKJmEJwyS+Vj5Ofj99bLKv3aQujrJDfmCsIv/rNH+ZdUwpsOlh\nW+kXpdQGGqszsb8t0K9fSrhT0dSL6pbxU1IsqSkvH8NnCZky7eCQ5rawBc24\nl7OslTqR1e2jwhh/mVuOhE9lWvC9iu6DVFJT233otXFM3QGV+N6p9GHZ6XUd\n4xtehn4YTMe1wrHmIaJpLSZc5DNanQJaG2P7BMkuJuMs82BPc9DsIV1CIo3Y\nXGcEfK34rLasxecLXyEB1OMozRzybuiJ8z3Rnann9Utq9W6OFqF7y+mCuig6\nD3wXk4rUfCsfk4NqW4BCwnILtpE4HnDPJdS88rM1wRxL6Y0ZRpCZFfro7AkL\nT8+MrleX66V3CYhZ6RF221u9JDLD69PqfeTjYJlTZ9Y680EbgK60tgTBAR/e\nN9OyQBPFNdkBYUkV0qW13czFmEyQWnd7BmDII10IpjxOXI3wiJ5xyQOtiOJP\nQMfge/T5bHP04ItXkvTGr5+zxOEXPxboRVn5B0vGBQgjB6LhZEnbO9EgO4aV\nf89V\r\n=T58t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQohxkWpZZ4jbXfk0Sfxc3XVelHtNzxjek/B6L2O0ydAiA7S4tIWOOEURXCe4v87p0wbKcEIl4BRletgTjkC0RkSQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-radio_0.19.0-canary.26d34b2e.0_1599170223242_0.7354063671295055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.a1c44494.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-ripple":"0.19.0-canary.a1c44494.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gFgowvz88BQXcF8LG0YcEehf9fNGIOGITXSqKU4PnAfWUcs69QFqYaC8Ku572upFrfyCM9eS/hB2UlYDcBB7yA==","shasum":"238c7cb3560f2584f9ef5ff0fcc1d1d7725c0c29","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.a1c44494.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVI0CRA9TVsSAnZWagAAqx8P/0A/BXu0xS8rit2xUQGs\nwc4wOZ5RwS9SELTuDWzkjqM4nnuR5zqwFe4qHgD62Zt1W94652k7W1iPba8n\nJmZBE2DbP/DSI8Sft0XMpZNUmHmPQq5gKYEpEhzpzRP87BjeMNAs0d3E1MIF\nGmNY5E2/ILE1JuR6dJNA2sDAtHtIkFv6BWQ3qnE9ZrIsIEWDxmpjeRRQhqTA\njzY1g3LsDrbSnjEhmun3Z3M1K5e4pH0JwLOe+tSC3dyHGTjyOsp4dSiYtO9a\nXsffQH8FAThniGtN+5IYDfOkatiWORTj2xBTvW1SBz/TD4gSsEAK8S8DhU5R\nhYoPYnv8cKY+hg+RzXHINanWE5zqLB5DND9zy4QAF5QnGSd7AOP3Z9pYpWAD\n7TjIuQpl4oQ73H9Ne4Xea1MsmjP1Pz/l0lfOy67Im/kz+VCDupCyxxIFzClT\nK2T/CuVGZ1PaZkjZei3V4qoFR4PzXemMsObO/ov6XqNOJ1oJQafyeJKvljRi\nZQK4AKSiLWajBMFjb7aokL5c4vDg24pMDIQwXoBaR0XPdQ85cvSuJlAyiQkt\nmYg7VNZqqV9llM0GJPy+atxTkIHtyJAy0wqEswC8RHVyhXr+yLEKhYIip39o\nwRToPPhOzQIovZoRqODqBOXQzllTc1PpGUqV8OPG4M5f/aJfasY5co99IcJF\nU/0s\r\n=iC/w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf+triGBaNg83GjUGJUJ96V78JgmGi544cFbsO3UfyNQIgDNko7pVig8iLrxE3KfPWdHZTCwDx1mYragymlZC478Q="}]},"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-radio_0.19.0-canary.a1c44494.0_1599689267984_0.8608375878569456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-ripple":"0.19.0-canary.be1cd1e9.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-84YHWOkG19jCB2tWvqDm1s6sMW+AjK8bCSzEkzgef0ZiX1S5th/9jvhocVTOwOJb02e/3shxA1n5fqZGtTd+uQ==","shasum":"1ac3160e3524fe3f72fc122d7f997efd2d5f694f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.be1cd1e9.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlctCRA9TVsSAnZWagAAw38QAJ+RpItf1qtdUJboYRjq\nPQBu6gReTeG54aDkFVA4a88ogFTio99GLJHdHp6tmVsY84trI60iJZVEy4tA\nEfQkzgyQTvAifQ83Pfl3T5OKnzm9j8jr0LM0e7/FYNI8FcauGHfPWo01YsAX\nBGH6wVorlbrPl2zFfKZhCDvCRONw/wAT5RTJAqnFGWla7mBQPFkZFjrRnKm/\nJtPQMwVAzihTpF2cDQdllKE/FE5e209ICMLYSgs9MIO7ywmRBaEwL4/rcTbx\nHwOSm0lHvisvcCV+PhyObwEOD90oqBYeBZMk4NK6f/rqSh2vAc7/f+2BQhkG\n6QQ0hBmQIDCIhv5T1U+rVr6Mctox7Yo3c9xF4c2lH6b9g+E7p77rMAW2vdO/\nwF87OBIU/3KRCUMKdmlzUk153SXQjaW4mI4nLITHcdZUVKh5rdt6SxA8VS5r\npR4G+TtHwzY0EB8QXB3UIkY4iXPObd/ct7aATfWyq2iOeYr/JsQL5A7oHVkM\nAMrCPsBv/Czf10mUuCFFhWBn8LYtEqLBnQJB9MJIAW6lDyZO6gWdt/JgcK0U\nKrmLGmegVi9zmuJ5DMRp31kYjfM37F3n8HwsqZ7BdY+HYtTzkVJoY4g3Vn18\n+1AzP7xyQ205y+rW+FLNNjkJsMuFyHtPzipeoiLRveLcoq1ADsfEUhuJoyPj\nu1iz\r\n=ksxn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEk98WNBmwyF6CD7WnXejjUEJukdnoSsBf7LY89ylw1qAiBUpKSgk+j1FTUX+eJ3CCz93ECJ8xoBg0pGKl3mFnDsgA=="}]},"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-radio_0.19.0-canary.be1cd1e9.0_1599756076737_0.9724447143926291"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.f094c0ce.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-ripple":"0.19.0-canary.f094c0ce.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-E+AVe0Zvg/XbZXpYPPeoDnP+POkOZelcpT8KrEYPcPZKiipwsGRhC1qtm1pV0GOTA1OJr14KcgKsb2Rv9s8t/g==","shasum":"5c71adbdabfbcd91f05f72c5e0c041e7e6cfd016","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.f094c0ce.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQZCRA9TVsSAnZWagAAP2UQAIgbx7cCH50DDG8wm82P\nftwBukuEZC4qDDXBsYU3bxEkTLLt2g+A3HQ0tHAhC5MRk9MvoAx+xcoDll0+\nMGshHriEn0/bUJQ9ADC5nyAzPTj62b9kezNaAV4YbxsdKRtz7hwwfUKB6hFx\nMZBQ5iAGjiSzolMEmUH9oLGKn2p3PGhf77SJWvBzBiub20QsVmi6nl0iE36+\nfnsEwaa/MVm37HqD40UgdAlHdIoU+tdMZ7v0EJf726vVvZI9VsCNzDGDmC/M\n7bDe9ZA07p3T4NErxC5+RRUn3ubsFHPQi3RjhOESLEXwosH5YNq6x0B9HVvV\nyadlnUMC/1TG9q/ok5ODDb9141r4kaQ8/5BRiOM+DgtOc2r+5HWZIph7bpVl\nwJ5gq4ZyEImlmH98fTFu26gJL5sMIFs2NcGY5Vjlq69HJX1AQAaAUvwob808\nJHhi4Fj0VpHkLdWCPmmlTStB1DsX5dOah8zFl2BQfHhS8XakQ5FCRL13xHyS\nNBZmhcfFl4pD9EaC6qIA3Z+AUJ+5oXE/0lO35+j1KKqmU0yEMsJJYyobWNgX\n7U7q5/Mw8gBykNNLfEbs4fOcQ7UROYbiKFdXJ0QZi3Kr311Vns9opTadVYBY\nX7UUpxsT54aNSNACLmlBcwEQiW62NuiB9aXxPYZY7K4EBczpEx1UkteZkemI\nh6Vf\r\n=gVyK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESwO8weQXqyltV9AsSelIurV++pPLfUwuQiFKKHXVqVAiEAxAR07YDBH/1Zlb+YwK4CuH2Y/eMgJS1ixyzOtiNTlB8="}]},"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-radio_0.19.0-canary.f094c0ce.0_1599759384631_0.6138045646466308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.c1261e7d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-ripple":"0.19.0-canary.c1261e7d.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-T0Epzg050FIEqVsjoBOL8qCYl50bS3Uz+Ea8rg4MAOoRL5Kr9pb4Rx552mgr+eDG6qwjkO0kk6prNdmticohVA==","shasum":"5934a9db2eb559ec798248aa33d5798802bd7285","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.c1261e7d.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBVCRA9TVsSAnZWagAArtEP+QEi6fD6bBkiyAFQQOKi\n6Yc1ijBBoAfFSLMjW44GXGHy+Lske+x5mSrIt3DFdR1ddzMOFL9hei1NiS9N\nHERrjkHZzgZtVCug2jC0+IrG42+dLIgVOAo7AmgHJmd7moBB8RbrqSMVaM2f\nwuZbm+LUXSAoEEj2cUNmmy8on5i3lVY3oWcfxjFBBUDz6XuaIAmnq8v1VImT\nyWd5MbnZQ10C9gsKUavMLa827lmePAK1MOUJ80ukcUJZ363FZy5IwJiWa/FB\nXSuWFhRVvUqijB3/CEsgmSRs/0LjllfkQ/yhCNF+tp10J2j3Y7BpFODA90uw\nq4Ete02g9iswJI7pgh/5dCdQyhN5X/JcnsHHNwyvXMPklJ9DnPbkPZxJWjxm\nP9iCIWDRA9cZdC2vb9atcHqq27toiYu79rzMs0um2FE85ZJnvE9tnImu/zNH\n2B9U+kB88P4wwmZbLtC3AKoU6l70ShV3ry3wMbZuH2LaxwybyXwS+PHTbLdK\n2/Tvg01OXcYi7A/nA8tGGCgnyPMwPviCcSLhnXOyI10QguEff97xFLyhEPpS\nVL3/Tj2Dy3F6TurftbsQVcI9vDkz/p+fKgbxSqkQKLX7ostMG8m0CJyG4a6K\nkLk/EcKX5iLGkz6hjtIRUojO4+L5Vjb/cMopifg79hDeaaXI8rcjdaSnyLmz\nUadi\r\n=gar5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpgeCBXDFucnnqztup1am69z/gGzwYJfMJBljMp/KCAAiAFbF5/X9tgcd36xPb7tCqkq4TrweWEAgR5Z0TL3e8QfQ=="}]},"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-radio_0.19.0-canary.c1261e7d.0_1599791188968_0.0208835754970238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-ripple":"0.19.0-canary.9b39ed1e.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XLVS1K6nrbS5BsKCw7zFiN+u3NYmJGiuQI+ouZSyJ4OEkrdl6m+kiCe0r9qKdHKqWo1cluJ5Udj7adyBR4N4xw==","shasum":"521359500e024f4c2ac3a2c55401a13d58ca8d84","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9b39ed1e.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCKCRA9TVsSAnZWagAAG/AP/3PnvF/ITDxloOFfoTaI\nEJlCSrdwFRryfsjk2YXRsJSa9zN10o17Mw4VvmGP+RZJ1Ody2u7H3DCLFLqq\nc3S/P8WXa2O6BqWC8qENc0CL1x856xRkLs5wf0F5Ub1jvD58oUOJSfVYZUa8\nQPAQAvaBZZ13/jXP04YCUhHEPoxvvRgU3447qwOkur+eac00aHuUmwNLZOUT\n+Ut0z9IUk6fcK+zgYT1XJefTetDXFzuce8NcSnzUaFQZiB3rKISFHBFdIbYU\nVzXczeljkDnTHW1DFw7NVToc5mcHXw9dhQ+YDId5cfEyFJnQIDcKyOq2i6bB\nQUJOUrCn8+XRJrkn+H8uaQKnpSSaV05ahwbpo8GiybdwoFxQ9+5+Jht7bU5d\nl4fw/JiiVqnsjgjUMp6bzCIf2ZW+nPY4ZK0ITTCX9aKQZB/1fk1Ccm9LuhWy\nZCGMp4jZrdXyUewbkMTWw/J7GoogmN4KG6mpxH6YYHoywCZKewOvk/XTnO+B\nNeQ+41Td4HY/7l+R0DQLYmSW/SkNJ0tUWU3epsD+ddK91BRiXX6lEhFJG5UY\nn/GFQ0TfvufpKYj1amgtqk6QBOEzgp27GtrAt5wIcDqkWqKZFlan4mL/YtiE\nTv7cevsP7CbcgPyxzFF3RoESnNVFN80f7frYFddBPDgcM/SDHzNbOlJLuQ+7\nzPpA\r\n=+/u8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjoOXpBJLky+5+e7PKT9C8mAXcfvn2sGIUSDUMwtSlqAiAg2RwXjiLAHrvnvunG29xf4MsVi70+KtFcFVcaT7H1Tw=="}]},"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-radio_0.19.0-canary.9b39ed1e.0_1599791242500_0.24571695620107148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.e67214b3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-ripple":"0.19.0-canary.e67214b3.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HZprJygeOxQGZxCcfuhxWcLPxxqDiqcMYhTWZrszwnz9532Gy78U5i0az414rapUrwru6PA9W7tGwpGYyjtfoQ==","shasum":"2abe1ba96221ac50119cc07ac5386005fbd30317","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.e67214b3.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGPCRA9TVsSAnZWagAAL3cP/3yDaSG9h2DtCiPtTsKm\nv6AiYuDNBC4k93X+29FOovdDg6Zp/54I+jHYSsJitds2rIkOtVB4MgL9+qMu\nd7gRmkGtbSWfHsQwCqD3vXpe7HP/7iTIv2lvGqqQbMqY6kIvOZjSREVT4m6o\nZol2U/06uXrAYd7gkYd7IPLWUKcIVGP85eFusEYR8UEskuDXHOGSyEWOiVza\nLv3IuKIiBpOMMXsSuHtTOdcjkq1AzXBD3HiRcEa5rP1NjDm38K8ZVKKEh7Xp\nxNYQusYZGFPlAcaJP46lbJ4gQR7bWAJLiLqlu/PZfV/yJLfIjVtJDe1e0fZB\nNx/Ig4HUgscXg+kugaH21mRDu7VxBEIiys/UZG66FexIqKT5ToWZIMkbsKqp\nskK21WFDnl1oEp49fsqKFMZib8REsHf8x5VB336RrxAx8cko4mj2btPBlwE8\niZnnPFsJUEfsvN8tNmJilTPgn19gWKVHX2u+Cn3LDVXRsh3uShaWO3MRJqq0\nhit9M46GJ04JQnLSkq0SXuFNgRZiUy0wYiAlrCl8AckuXchSl1dVZbjpgzxv\n0kbGX204EQgaUP6UM1crdeBER35R3F0NtNaiYYd946QBqkyTTGAq928IpozK\nf8ogB+KEFnxsraDkJyT6scJZyc3Jk7DE3Msh98JZHRz/maPsqiDUbHs7e4gu\ngq9G\r\n=d4BV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8pkYMkI5o/8s5rYgBgVmcinyMRXKJHvquNsRBo63jMwIgL1TAcCH6VYB1U55Qkgs+43ixrKKxXssSvIbhY6ds/iQ="}]},"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-radio_0.19.0-canary.e67214b3.0_1599791503150_0.9398470738583748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.36f5da28.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-ripple":"0.19.0-canary.36f5da28.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-U3pVTy8ncYitU4kkuzWilRuhzAHzUMSBFEMvhhX2I4pqFtl8n2G9Ihx/EsUHSfQvq1XGKzp1KOmmRHak6Wsc6g==","shasum":"709886b6674fe18e04a81627975d6981109035c6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.36f5da28.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIxCRA9TVsSAnZWagAAx50P/AyG6FmJxAK8D/wma0WP\nnU6UTiAI6UJLctSrX2MnpS/LBZDUWoJxTc4TJGU6R0nFlghN0P/Y8rQ2mt37\nS9jw3DTtiXahwWlXDylTA/teT1AA/DCXc1SIdhBmeWps38rcBW0Fr1SvriIP\nBQAmaIHGqGFQBLHstoklIvevNyswTeWm1KzKNzyR4jlQcH9JN94ePL2qXYRO\nxju1LEV0+J1rFEGI32oQP5z/9YpvblBwhmiSBchjqvsHVpTMytvWmsJbtpnQ\n6nCVoeepwFxPT+wIqDKbhnMv7GMlTjc/MujPr2C/y10N/9R2SFcdr+oZOhMo\ncujDUAdJhrmcdc/idNoQtIPKVuUSo2fPsakKLv+st7JDPmn+piWI6NmGgO1i\npGHnsygfdMVW3tgwSMuQLyIocp1NDglm6p1n1VJL/pmlQUJlLfnvkmX1uhnR\nqHLO1ensQmM735C398NWLwWecwOdajnGfCYVaUbUBhx7lwMkbYucaIFWrOPI\ncyTPaVm9GF9Jke8eVW60Sjhh/Hjgb29ryZp/BfoluRyX7doxpjI4OOSnwA78\n3ndWxJgNQt/k/mRHgQoiC7jwzBaub0pEd07obTp6QI9pWNg+JQcYUC/nsYl8\ne7Zri1/6t4hiC+Zx2dgmFLoPmRtDTYW9TkvCPlZqt33zdz7Ozpw+AkBt1K/j\nFQgp\r\n=+daH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHReaDx81ZUpb0yk5Ze6Vi4c+NE4jtpHIapUvpxFVbGFAiEArSJ4wryYb588CTY7tYWW6nEh60BlMBgWT7+UfIRhqN8="}]},"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-radio_0.19.0-canary.36f5da28.0_1599791665159_0.42226937056499025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.3babab12.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-ripple":"0.19.0-canary.3babab12.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jpTla+7NF3Ov1mPb2VsqsaRjlABrOGZgp1ZQS4H82wKM5GC2H5VLmR+c7bBQUaSm24IHLhU7A383r1Y+rj3Nmw==","shasum":"dfed2362293a7f587d777e48849c37c794323e7c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.3babab12.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLjCRA9TVsSAnZWagAACUcP/0NcH+DDiMDLDX8+9yfM\naDt4ut7TGTtId6ijLXdHhmSmJKtGnPTXVS/KcYP/njuLGxAqJ7tuMIh1oNNB\nuo9QS94Vfn+PukJIs194apUzMZYeS+/zhpBeGl6X6V1Z2eOmyvQGCexBNtK3\n1jEgM4pYvxDYbl7D90Gof2cDKk70hexvQcPLUi7JG+QFwmHAFofgSOYSLUGl\n24vdj7JIBux/0wn2zjys/rCKqs00SHFHw+IefhTcGTApkTEmkoZdR7B+WzzM\nCAeE0Mj/vPUSRF+0w3dZxrpgcM4x/kbfkLedOb4kIJtaBmjJTWpm2PmbhsN7\n057pHaEyxuTV9VWw8GjshaY0sWR0OfEbrXdhNCrQLyaEIft84KWzY8v32Zu0\nhTnuA4iSD2vumfH2YwXGYRXZSfXTLgrqZ3s9nVTsx25bmc6hNV0NWXObzBnm\nXdj901jtI74VuC+IBX4NSiUB1r1RgLxug4KmPrm4I3d1oSRVyMGW1Q3jiLtt\nG+8L7PfqXPv5SABtCSbzDklFYADhqIsiICYMD+2CQUOhXbROM8xD2ypHj5Pc\nZ57GDX3Xn3woM2ObeNRCECugAKArU+KZUYbN4QebTmmakdGpsEVTwGknK0Jb\n+q7g9zgMVh3JiDtx8Rrjbc503VxqsNHbM7kWwJbYRe4NzPgp/qIK6ukjK+Jd\nF7pc\r\n=d2gV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvPq4hM/feZjyY505WBmAyvdkqMU5qMh+1LSG3JCLpYAIhALNwwjXm5WfMKQVBfOUFfuXcb195cyIHiFgolVWki3eJ"}]},"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-radio_0.19.0-canary.3babab12.0_1599791843153_0.02802401903170204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.a4481e6f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-ripple":"0.19.0-canary.a4481e6f.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-y8g0STrKCVZbbGetDj7W6iJTlR9mUx/skfgZQGUUpHd6YnhTxtAbY159BksZFvVFaNCUW/+0edC5yS7A2Sp3rw==","shasum":"488c404901d88536e40a99e55e534242899a0f8f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.a4481e6f.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuW7CRA9TVsSAnZWagAAxPoP/jwUDaQVzExdWyOza+1K\nbUFi8Z/ggPmvWYVMvSh4CmoYry9TNZ6AaVZCiMbyRdHveK0uAmIVNgriAQLx\n3jnUeSRRLam50wjBCMV18RzJUaNERl6mA24WiSHeMFmSNkXvxHvjH7iHrZZ+\nKbxPVPK3t/eqFQb7Yok3ns56Rt/SDOgMrPx5PyfsXJpqkIeTtVrJ7LAkgjCt\n9BXc9OLPKxFsGADuDo8FNSnvakLPiAEG4ozy1T84sL2O4eIIc9f5GYxLx61C\nGSq0oDwU+oNEmJ5ws9+JnWg2WxoxwI55bpyQM+P10a6SLwgOrJ0raLRMftM3\nQBiTCNjGEFO3ueRjiBhBeysTzIOKUKdyl6UudEBWBC+yE7cSPpY0VqCcb5wX\njng3yu6HbXJiaxlYDVZXT5LVXX2AcQPpVa9dKCbVTL6/Bg5HDR3y9TLKTkjn\nbvFFgPszoniDnZKf04LrLITL96nlwADY2uPAWnaR5VG1HsRqQmIWtoWR1uhB\nFu8zQN00Mka6lHGzyCqYW2GufDeSfAj+szICRD2Sy85IopfiGKXyIQcEqq71\nV9j6hCN/JskOE6JJJaqDfwa+hHUyG3LAcz2oWgl0P4rd6UfdgshpThLeEes0\nKe1AZRGtoLtT3uuN0IonEGZi9Cd5hq1gWQLzxa6OEFii5eEyDHuWap6cKmuw\nHC9y\r\n=eCL6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmA4jydCte2Cvq8OeQPcbV5vdtwRY35d4HX7ufuTsbzAiBZZ0DY+4X753mI519n6USZTrRuDp5oX7gihDNER++d/g=="}]},"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-radio_0.19.0-canary.a4481e6f.0_1599792571368_0.23983664153026552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.a9177836.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-ripple":"0.19.0-canary.a9177836.0","@material/radio":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.744bfe5d8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-e/lJfyzdaqJCJDBuYOzrGjZGSxNxn6vD7D8FrBA41sZWRl0yE3PgaWrdcTce8plnGHItzQqaUUAafiyruj/gTw==","shasum":"e7b8332041c88f6119cd8fdf666a067bfad82a94","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.a9177836.0.tgz","fileCount":18,"unpackedSize":92729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7g7CRA9TVsSAnZWagAAFIMP/A9kK3Hqg0okRliztjT0\n/G6uATp6U9X86+L1Ytv54Tg2RDdO/9iehpB72aSBYPzwuXUrIgo9393s76fm\nyRbTyj3IQdtmI1jeDVcehstXAi8m/lZrFATPp22knD73yTDQOX/pNE9333ml\ncTdBArZxn3MGA0vrYKg1UX5AtI4CgWxN5jkEw4zpah3rzfQ/+W6fntkH0d4T\nrLbwJWkroyriwoqeoYczNnH2WUDWtJuCn4w90qICc2u0bSDQhaS0oOhi1RM2\nHao3LcBGYmmY2N+tUBgc1QCY+XupUANitxTJHqlXqibvDYhkNzHvKpEoxQdq\nAMt3QHky9e6ohKTwhX0CD7YTWPd9KoRRKTqM/HKX2SZcFu2AGBAQ52mDA9SJ\nKKoMvUS8tlfizd7PlguPVu+04t3/ZCNeiiiO5Yu0lDpVOWkiUmuQR6W/SPjW\nG+c++RVBjWB8BZgkANAAECu9RCPulVjsMjhtJhfFWpKHKj2Vm8KdKg4cKxWd\nL4d+4FvnUlptRObmgtrfZyOesCvSf5H2eEkLrmU7UX0/RIEueKw721iGWyh4\ninjfuBjTKGPL+l2IGkBBnp30lzOgLXt++L+kjL9h/6Dv9GsDWgydLu2h/N/z\nBjihfTG3/FawXXzKzntgMuEO8R6VLkzVHWNihfqPEyhHObsPNc4my2OuHIDy\nPYeT\r\n=tTHc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD872yD6C32FzHXdVDXdW+2hAhwEQF4TFhZ8dEffsEhrAIgI24RKIyl2CbTKbHd0wrEJVQgqrncrghn4zkNAahu/Ik="}]},"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-radio_0.19.0-canary.a9177836.0_1599846459331_0.4935935614446163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.b102a3c8.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-ripple":"0.19.0-canary.b102a3c8.0","@material/radio":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Default | Description\n| --------------- | --------- |-------- | -----------\n| `checked`       | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n| `disabled`      | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n| `name`          | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n| `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uyPVWLWH2KS5jnP59KvIVyx1I862nvJZOZHjRxHagjC6iL+HGwvQVB2thxQ8AZEZJ+glR+CnqDFmfc83jj4V/A==","shasum":"dc780c4ac6c2c68b75f084fbd8d3ae592914d508","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.b102a3c8.0.tgz","fileCount":18,"unpackedSize":92741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87pCRA9TVsSAnZWagAAWLkP/1Ofra5x7FQv5eWeyUWd\nIL7d4Nq4wa1YSumSa9BfqhToNlVnmjSmMzaWaZKClV1BaRMH2XaaJQ1hY9w9\n0BxiWZ33pM/u1EoVRnJIhzlUIzj2YkaOth9zz7JEJathNc+hbuNbUNO1qasx\nIg49WYt6/MHrK94QPmrs3UK7ii7D13WO8woTGJHdVmrhl5bgI/JA822lsdur\nLXo1NO2GJ1rYF16rXhJmKo4XQR5tDv4cY3QLZCdzD1xjgl7oAOO9Wnl5bNvq\nGsCpWHRimGitBRWX07DIyq4AJYx+qqfoRJLHCYVsI4b1GMCVxy3P0pC7p/4Y\nTAUWrQU5ThhbetxRDl24SMOKoWbbbqs5u42eaReWBbGmet5MmRtvv1SPG/FO\n63hWH9WBRqwOE69i6I9lOODiz9K9OCihG/UFFG0VaFnBhK30JLkxBMA9fO7d\nn+EBNLqxfTxK6sNmE9UQrekr8UxP3PUsWhTMwGhXGjY7WAE/YDUZd1AQyl33\nRJOngn44ZUIgF1P5faiMzZAYi/PbBM6M4/QppdZunxdtfu35rCv6ol1Qtozl\nBJfX+fmbpufI9CsbgYyv+VzAfhNI4SVZOinK47a+wKk44LvYUFw7/FrMRwma\n6sLCnoAPoHEW6pXyTeMSxtKAdLSoK1DwdvF7BrDJ613atyNUTOEgoGwfxmxo\nzuL+\r\n=VKuy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGiuNCi9l1s+2ogpBBxFQszjE1y1+S8JyssFRkUebRLsAiEA6Pb4WNJht2VcajmlKSjqhtDvR58Mxbfxedl+hSzGHK8="}]},"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-radio_0.19.0-canary.b102a3c8.0_1600114409099_0.22006378448260433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.a7fbc707.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-ripple":"0.19.0-canary.a7fbc707.0","@material/radio":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YRbbzNjOrRfs5weJgY/1AF0Y5RErNNt+fxu0sVHoFh/fAt9uJf8iTBJFNDUvEOdfJZ1n2aKzRqQVrcOVFzlMxA==","shasum":"a8d2b453064448596e37ea8c395637d21c51404b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.a7fbc707.0.tgz","fileCount":18,"unpackedSize":95106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZfCRA9TVsSAnZWagAA3ZYP/2fFtHWlDNpO6B8MDT8h\niywOlsyKTFkM104LyQ8QDIHyz1Ttg+rpyDBHwWAEbhBi3L53cd/rrDTmpaMQ\nsahF/RgxrR5y4TPrPCr3qRUeJFDR9uDXKsM8B9aEw7CPtIxxE0RagITC4T73\nj+WMM5jZKha5kn/e3YOzyC3McD0/sIJ5dZZeCMqRXLfUE8f7ODxrtcraAhRg\nhRutt1NolAK/8fpBfx0QU2GI9oYzhDKVKcDtmrjWGnFA526onBYfy5+2e+VI\nrOxXIacXft38fzrQ1lY7hhwbetvMu2Tn/Nx4dr8jBQ6g3PUdAWuzCta2J0Rk\nPQ/Nl4pVDUNF/qshclcwVzuOnz/OHAqkVUKNBEcJmfBjuceXt5EAL2knc5ZY\n5ZL0DO1TXJzmckq4XG320vw4a1b32bOU7iZPvqIDVBcJkpj5fLlhmubDv+TQ\nYJ6FlN+f8Q+J8iNBQ/pQ2DVT5HNe2mE5364ZS0NeMt3T7Y02Tmn6xGui6/0d\nqlVSPCw2EZgvEfIiN4CftvVIBLK3hm4PLKaRqxxVCgVfRZKQmjPKAI1aFbnS\nto0BdSmXb8HFGvMQP/+3M6he0CzZkkIyAj8Ol7jzN3dcebyuuJ36dKl+154x\nFXE5OMuJzySGRpb49+2RojUEaO4vr31W6+J78d1J0x72gwrLR4UZ+o2IT9j4\nDxe1\r\n=zHra\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkHT80V8w5wtEIsja/u5JJt1oPL/H6CPfJE3TS/mcYbAIhAIZyb+MLYJq9n6WpQdgyl9dmN9JUEuZcNSRN0qd+4TSu"}]},"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-radio_0.19.0-canary.a7fbc707.0_1600185951517_0.9175324462823498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.ed6b8660.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-ripple":"0.19.0-canary.ed6b8660.0","@material/radio":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kDE0u05V738ISxpB7RmvIB+kVm49Y3+SG9uOxdHYeQTzupAxUHwi9z5+v6WkQuj/lnnGMC7x0PW1kWXueZfqMg==","shasum":"32f1ff6658e308006cfd796d4a5078ad4b563c08","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.ed6b8660.0.tgz","fileCount":18,"unpackedSize":95106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjsCRA9TVsSAnZWagAAlZcP/1XkybFbS+3P0mrc0tMw\nMnksKtMcPPDQ2hi+xekGuCTKbU6TzxmpCkhErTB7Vp4zzz7IX6hA2P7BWZKz\n6gPgmK6y2esBenB7UkgYFqxva527sHbn7sRx5enTwgfUPLOrjgHpwOKGM5iY\n9m4S4T/3lW31ervXUlUxzSnOW5Iwqa2UZpPgYPWZ3rPAnhXcI2WzHOee8XX0\ns2AwlIprSjjNjGofziz9CtDX+OAAQVfs7BRreo8tEP0NL3dxNurJU2Daa75a\no9NgCttymWWWZxXaiVlanY2mzo542M4n/fQKOrXmI7VgSDMYfEkVNDaFGeoy\nw2WnPhFOzmbp+ATBHN0uGbnJ4CurlNNnDFfF6yDTmGRp+bGGnXGkwQmDzA8i\nPCWR9SWtyqrF0DisFXGvzB6sdwKFrg6QETTcVgEyvvguJbPW9nXIUet6gtQB\nIvA8KLs9YZpM7+sFpsQFZnsOhV7ASSmGD+HQdqOMqHVqpyrNPLxHLW1fOhpW\nKlsaRYgy13VQZmRTWWlipQZOwaNGcjPtg3t/cqSlR371um/J8Z2yoclgqiuE\nHYBAww4tRhF3kOg929oReo7+j83Kx7KnOGGT6r/d2pVxsm/qsqg4ID9xe/IJ\n7WGhwYD2RWI1Le6nbbRNZV+b+ZKGgAqb1lj+Oh0p76VWNzVrB2yG4s3GjFvI\npDRh\r\n=D5RW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkAuHCObbNnul5mGJos64ShvYZthh7Lyy6TS9oRvTHJwIgD8xiYVj6BazerJFQ1+Fu+sXKF+9EkgCTPjK7DMlG8Ig="}]},"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-radio_0.19.0-canary.ed6b8660.0_1600190700176_0.5238191731473218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9c2331f5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-ripple":"0.19.0-canary.9c2331f5.0","@material/radio":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.319bf66de.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dimTCnJPNy5Nchu4gMPelgdw64fE++pNiejr8NllirN/Xmzaz8zHghMxyrUzI5Bx6VJvrAd60K8LPUrP9bVbCg==","shasum":"765b1dcd58eb15cddf54c5015ec48c96f0588ae9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9c2331f5.0.tgz","fileCount":18,"unpackedSize":95106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6rCRA9TVsSAnZWagAAjdEQAIDIlkPLdfomVHCFWqY2\nR1FGI+SEHhRE/Qb4qIZ0C9OCwCJIb4IdAQTofMkCGM8YnubJS7tubAnqE804\nldCOJk3tS01qGyyE0y04rXy5pC3qPXbfsGGFGzkjXE3Zx1Qof70pZcqJBJ64\nXeLsC+t+nsgRzOixoTIE4sIqC1yJe/L60qIp4HnxrTTkYZmnGnCC2SXDZZ5i\nVNGJOlg0EcYnrRE+DFcl10Nz2pKYF6xu56aqKxY+19Td0WnMM6VNSup9N7wz\no4TZdj1DmHqnPeujWJxnqFbhgJQA19JHK+DaUH8pj7ylBa3Hx4lX2tbNC3pC\nY682vb4vm9FIEd80e3+h0CIFpwl4gia4Bje8M5CzeeDu2j4XqUkdnuHhhkYF\nGqXK/3VbH8JAyLrbw6eXSv0/20k6VX+C8mDvemLZ+3hrIMIa74KE7XACbII4\nZKWoL6Ji4jc1V8zNoTXHjU/a7AUVJkZD6oVWfRDb32UA1nf1LenPDMAUm4EZ\nxaF/jdG86QhxhLdvpF8wCAwiCfS317GY0zRVHw8pqzVP2vsm+Kej61UIhN+a\nU8s96HN2oq1TPTEHKxy13ZKZv81i4l1d5uP7XkcPmRBVQAAqdI+g2JW5imEM\nOcnuqKXtO7GHHftTDLxEbAzsjHnzJyCP5pmvGIzuQ1r3OFbp86GHpXbhM0JE\ntPir\r\n=0vBw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoKPafPaP6Wn0efhiZbpTpNsyrWOrpFzJyl51bS88YUgIgLa4+itMBNXhKwXyTXc+/qxmAE0lyFRavQ1gzT184gHE="}]},"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-radio_0.19.0-canary.9c2331f5.0_1600192170597_0.14517243612883113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.63a5f088.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-ripple":"0.19.0-canary.63a5f088.0","@material/radio":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a831d4799.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9BtPdf5iXbLfpAxWrL2VttKG0YjLbamPfJvQTvE1bBbSgCG/juDx47eiHE3Zgs4loAwhmnlCou3VFSBPc0eHjw==","shasum":"cadefd25d362e3067d291cc5a055d68368b97afb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.63a5f088.0.tgz","fileCount":18,"unpackedSize":95106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXBCRA9TVsSAnZWagAA4lkP/ijvdc+ruydfnp1M2390\nsVZs98FDhVP5E7/S+sFtkaeU2O9YAK8omquPMnv7S7XDyVzKolwAUP1lq7EJ\nyy1RXF+FZ9l2JBmyz+sXVKM5zfJYXrNpSkTERzl0zLbZDfCs+KTvsq+oOd9m\nJWok6UFAzgjr+bRi3509FUNgP/pFQz9dAWha7x19ToxjchBtPTffxnhkSxqb\neMgQ7Offcc4ws8B24KLBm4SXCTeUUCkAqKZGtZ5ozs75F8k9KLJ2OdC5du1i\nwHY424MFCcbSVs1y75+kYeQ6S/N37zXBp9t9w80Iu7LP/JQAMxcLJ3GT4ocN\nlpk97PBO2rs3vsTOqZIuLODZw7fv4bpf8wEVBqVTUQDkhU3v/jqXPpl5qvpT\nKO9njLoxRymmPnK904Bmf3WmLVK4LfQRWL24CMNZ3d2purx3knPgtzITmQKY\nsQE7x13pWkk5RhymFw84UUWwWR62Y+ycsC1YXYHw4IDBX/AGpSZ2QGg5wWs5\nvsHjfLlxe+tzCL9q5+BunnAKmGIdydw3uaN14fvbIkfuCh/jmS8cHZV9tYek\nGU5ZwiTfR7dNxWCRxjyL0mYDq1gomY6jmW0/wDq2NZvVQx9F0bLUqkc4fGgK\n3HUtrQMpYvU6nprPYXCu0GBsnZzkDlOLd8CpWYa7h3Uwz8DJV5iSqqNBqDgh\nhMCy\r\n=92VE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpXFkpKDmcwkNcLvGbM2LWW9oYTBiMtS5Vkd5oOZJQ8AiEAhvMsh4rlIqu773cpbVTPYZVUZCAjr6JgYPfkqO1UFqM="}]},"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-radio_0.19.0-canary.63a5f088.0_1600292288618_0.5180940585516185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.b7995e49.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-ripple":"0.19.0-canary.b7995e49.0","@material/radio":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a831d4799.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-R2QXf+AAFOyKJGP0Cktx+Bkkxjrd6lgc+J8Uyidgs+ycMVw9Uz56iXm0SOvCs2puk+NZ1Ra5AH3aW7VUsXcQpA==","shasum":"d0c80b71b8e08862db422c18ec266896826a1a43","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.b7995e49.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp80CRA9TVsSAnZWagAAYLkP/Au4EGDyBnBOSo7h9Xu2\nP+2azN4p6AeD/yF/KYJExvDyRd72fmRfOtU5aZbeLThhfitrlWzmLrpCRRWY\nsgnJedlo6IZnHRr7bGInLUP1NsyEFv2q1CA3LKHxBxIM16vLL26VJU3mfJil\ngoJYAaIqyp9OALN/X7j3HHLy0yaNZk4bi61uiFQWzTqT/UhpAM8pDBQSuj2e\ntcLQrKF+47lH4/+8pMqAjBSrgnv6Oz5PCYNQUeEuMdkrF1dqR7plmyh5y2MU\noZZ933ugh/6YS3mG3zFXCf6aqeoOjUydu0cfHf+fZowJmlQpAEH0FzHmr87f\n2gDpA29MZnq9lxxFGl3fIwiEzMXCKHAerApxIpJ2rqCw32lA03VAk624N3p1\n4m1PSJL3jDqvvIealZw+0wKUWN84xHmNvYyh0or4oChzMCu5lpf3u3RVPE6G\nvH/tqB+p/YSi9AZgaNW9AzFL+sayTbRD1+fHDIqBl22y5TXRxC+mtmzVeZWO\nBDoAdJtw5MXu1SCsfkTAP6uaiuGq/TgD+nA7sSWha8nK2BEaNxxp3eaZ71tp\n0BVNZrmueYhjayHmSgk+wEYCCZaEfiBqrOgrqNKLphR9kYOEz1cuE1uZMlTp\nl/8aMUOdOkBQFw6pnFilsOMbf+P+drUxTaYDc3qR2FKezCLkO/GPWgruUuNj\nvhIq\r\n=K1oY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCHx97pg9YuGagIy/g1vwLl9OMjrIdBQ9LHclTWaLIVM4CIFU/qrK4cbfmWe0PQtho/5++lnKrjP1dQB97yCgjJFtO"}]},"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-radio_0.19.0-canary.b7995e49.0_1600298804577_0.6211164974999386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.0da3ec97.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-ripple":"0.19.0-canary.0da3ec97.0","@material/radio":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a831d4799.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tjWUMn5vpXEi2jr7v+HaY5sInIulz7Nr6Isruoxbx34g2jyA/2c+VLuuCjy5WV5r7+/IlD5fCtep2C/r1tdW8Q==","shasum":"e075b833434b0a7172f2a398fc2d74b95938f744","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.0da3ec97.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRyCRA9TVsSAnZWagAAF9UP/2QajxNu8PHMjOmElSNV\nXDKwBXOppri7AaR17w69rYl8HpKaHPjYZYSKTMcO5i7TD5xzUJwI4xydfcZw\nfu0y3VJ+yVy2N2HvrjLCR+uAuJicRcPALOJ3Z8RSVgdkueETlNDVUAuDEWU2\nFzs6tgZixYoagEYxS0tJdDnPqFUgwOA+43eJxoSUysvZZDh1UHZCcLOmMSdb\ngicaQlncDIGNSeFedEpMN3E2WYAKlwhLS1iFYksoSQRsy+6+u9IjdPyetDkz\nTYs8w5MAbi2EKRA9NLUMu5IbGk06aZVQB8dTjXL5p+J6jZwIaZLyKIQn2FI9\nUMsYHtyQpd58J2JpcqM4YpL1WjENMoMhng48l1cU7wH7UgPcKoQoZqkNT/jY\nlRrhkBsZ8GE/r7Gp5iPwQV1DJxKllqvr35vjwzrdaNCAVussq3AFedwQCIg4\nMZVLxM9Y1kAOZ4JkbuVMaA952Ot0iL0XEc3ipYZ8nJL+NoclnZs2l0caxJXb\nDQ4ifmagj6HFbnUk6dyTHc3iGhd6f3cGHvglg2xBJ4+CX+L/R4fGwZEJClex\nPJaWdYiH7jKDJxjFdqLGSLH6bSlDu+Q0f9yp74jT1OyPPuE1Zk1OPEC8GDGR\n5qf9Tdtd+zEgd6Dbr4WJho271CYuZt0wZCG4Mk4qd+MgN8RKLSJYze1AK87n\nYgSq\r\n=QkVa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOLY2bNZnZH7QddjHtjJHEGl/mWrhEyRp372whvWMVDAIgULitLsu5kwKOLunqgTsrh0sFk1JLWLawneD48LDNDUA="}]},"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-radio_0.19.0-canary.0da3ec97.0_1600726130507_0.8053335582121357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.a0793c96.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-ripple":"0.19.0-canary.a0793c96.0","@material/radio":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.4e5c350c2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-L02lFmtVNwQokgrZ4m9QpwuyAltznsS/BBMW7o8BfzPhMjrsaOP4Lmf5UQoml/dHXqibRRNrPM5TO6jPKQFREQ==","shasum":"5e569e2be78a827a73333e58d577f82c1aa8e72a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.a0793c96.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6rCRA9TVsSAnZWagAAtz8P/3ApXQznugncVZM3KBBG\nCBHDovcKMBpbAAb9fV3mP+uJStY4XVmpOHxC3DtM9BiWxymuVE8gREvdWyAc\npvBnnIvfPzZzpp48CEJkUkP4soNcFlxdwUDcWlxjybc8XooO3RtlAeHDtR0s\nIXg9+ntAvReb/c/SDeJNglVPgL+2RxkjWUwjaEYmXBGs7LZdziQ8eFCuMLcf\nNHzR8+F92CSul9B1YuJfW0sp6+8k1F7SgPaEsb/JCc7ErdC1wIkwDsLUOaey\nxZVos0KJX8hUf517JtkiT4q0380FsCntL4B1SKNU9CVq1gb8zP6v1+NVFHnV\nFUlGdRMnsVvNqEuMizMs9gYwwFQqdZ+G9g3DLf+sxWDTOshMcBcOSVeBPSB5\ngz0ZjsHfRgiLpJUHExDRTDz4sfA0V5w4qgjcQZ7zOjdh/YbH2dZi4K6Irupu\nC9ZwDQm761JwzB7TTOcg0NiCJ9VqqvHLJEZL454tPuUHxCdRf8JDzxjxg1kJ\nMkrt/GQBiZyStVxlu9ZnL9lTCBkS2hhlBtO2yEktk+qGERufSm6FaoConRO8\nV9JmNsREJUkfb6PfsZoxbmKZw+IPwVSZO38sKjc2biwoMy271G3PpPJ1NvmL\nRZY9IrLZjd70bQPc3bSYMvWt3skSv+Rmy0vXbsW82xVZeYbRUsa7xgQxKWdw\nnc0T\r\n=L9H1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSUuKvZwXcLtjRaqQnLhlfbTrnNDZebNj+GRDoIGe7NwIgShuHgLacyXjdDGB0ohMirQhK9eVTggsjp4Nh4g/bjo0="}]},"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-radio_0.19.0-canary.a0793c96.0_1600794283065_0.3948577899343346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.06998a3e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-ripple":"0.19.0-canary.06998a3e.0","@material/radio":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.4e5c350c2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NQkM10Erz4ny72X6z+pSPKkeHHCi2HILGuv/KuIIbNEmmM6RDl0yr1EQ/xHZw4jFByys2JF1AWVRlx1UxE9dwA==","shasum":"9d64c2d1f15925aed35b6b7d21045721bea0a49e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.06998a3e.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGyCRA9TVsSAnZWagAAK/sP/0svQfKuKmhxp9H+EnUg\nPTZdYgjHH+TjH3T+fbbOjbxU9+JXQNnetXg8rcywG2BzZ9rOPs2Z5I768tjW\nyt5VahE1GQhShZ8rvKsovSDeEnlrdgb2pg0hxDUekFa+iWitWMxtuacedT0G\n+MoWF8SqPjwz03eXnNZFdyz12ABY3OdIrli7pa6409zZRvLCnTApvNJsCKWi\nl0VEz6b2yDTXexpbWwiCK9DEKSTYhxetlbA/lpYCtWqKdD+qbfXiINKU/Uw8\nDOqtOtzbrKtG71V8BPKkSi+aRk5qwdNLW2+QuH12wyfg7nULU36drDRO72qk\nf4PDs8I0MWZClIP9BRIYmQ9uFSS9P4VWeX73Q3ibvuF6nMxPoetD3PdknvQ8\nXcWKrfvGNfycCe8oKHA8u7TbJdfEY455TmHxpOVURmq9z/FaWoK52jhujZAD\n2LLMM9Y/Oy1P2aao3QBX2kTj55js7mwARFkIe7XRn+SFTtc7aaJhI0iW+dG/\naaWd5JmAkaoyB4v4p5mEovOQJUy5JxQ+YyO33NicV77k5G383gKAtcjPw4jv\nBPjCgHMTMfpURWEqVALsUty66+QNaDMLJdSIIKhFl8bBo7iYt8DFp8DVnvUS\nGLpD7ic+eDboUMVontTdFHk0HkitKIfl1ZwONd7L6HKK9aQYneSULijhVMKt\n0rQe\r\n=62f/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFHUAXjuBYrBPcli8V9WChbpN2Qlhzmpk23vGPFJdg6AIgJd6IdAmnoUgs8PzqH+CDoyIaLtN35AeaxocxqUo/SxI="}]},"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-radio_0.19.0-canary.06998a3e.0_1600799154054_0.9184038573643831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.3484a90d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-ripple":"0.19.0-canary.3484a90d.0","@material/radio":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.16c563ef7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vQR/dQ/vu4MvYi5tYp8h0kNkS62zq/7ZNEe+JU9L1whsxvQm+M87tqyVSv99xKwKjxP15xu9YrrnmiXR3/2SUA==","shasum":"834f195c19452e08473e0b7c63374df8f0b6c392","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.3484a90d.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTiCRA9TVsSAnZWagAA9lAP+wT2tSGVyhQXym2iTs8T\napTSCxqBc3Isk7lsu6QRh6DRBAlnp2wC12Gj/69oc0ymXe63NAZ0XeAfp6u8\ns3VSAj/XvKbSGq7FhZYbqkZBEkVcSujQzahp9N/YOQOU13/aREKinx9cymzr\nodnRgwQm9J/IaXjYC1VSPWTf+uDmN/SDQbsZrZLhzn/IeEa91BclSGgOQts9\n3PB0JnMCitLBrSdMgrs9HVXZCFFeOBGniVlUX6l0h35cnNgyIkFVvuwAx96j\nx8JWP2JeHSwidOGB7dZNK87bP0+ZSiH+M32EYy9a2TjcGS9s5O820fbZXkC9\n3kVjCpIBMETjiCghu1alTZRWd1261fM205VCd07q7rmLoX1rJ4cyAJ1lMgbq\n9n9hI1nWwn7tXWC3KAhE+MK4UdyaMX7HxvGANk8WKERz/xh0rYmnshvoVvFF\n9itCas729SC05WeyWoAR71LBQGomUVA8R9bM4t2qhxGZaQel3S+drx4yeLFJ\n8d1ZZT1WYxnRP0Sipyb/BMWSxAIy1btPiwtC1ftRtXcnlcBqFphz86otjFAB\njkRI+Li7SYFzLIImhMtIryhskx/8uHgNrTsUzZ3bppN0B/br42MydFjlw+5U\nEIjVmrdzBXSnerZ6cbIdkyNnXaW6CsMoYXN1I/df21ZY/FCjkOcKaqvc91xy\n5FIx\r\n=TEbf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGrfPkccZH4UYxCl/J4aRhxnrBWEwyaMA5VowOUIKtHAIgbkluG15i/0XeRC2/JaFtk1nL5k8d0mP/XrqG5iMVkS4="}]},"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-radio_0.19.0-canary.3484a90d.0_1600812258400_0.3852788943843275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.3f99af40.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-ripple":"0.19.0-canary.3f99af40.0","@material/radio":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.16c563ef7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-zEs6NOxLGnZsXWGNagWtunkeUGdXFkqBpFXfM5PjeORc4Zdd4MjokH2Cz6MOoPQxfI836RvEWdVExSvSmacW1Q==","shasum":"87398278a5bab64ff9006f4bccae2c304019c1e1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.3f99af40.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSoCCRA9TVsSAnZWagAAU1QP/2K5LJp5OKOYg483aC4U\nMKQAb5W0+k8CIoeC+qWffF7XMpprsiCBXJvlFeWJpq9YvwVT/1P+0UOkWLrq\nr2aURdxRtu3+5Yf151EVF1CczN/yvd7Flu63yD1JUEDHTHTZoZwFDKL9j4xd\nqWJkSieJ3r6dKWdIxLmmp3uJ5Mi8DN3J4qOT+H9Lb7swB0RymWn917kaapqf\n81BfknXfLsCYP4iWL+4aHAmFfKWpDf/wwlMxpMwg4yxnhQisZ2Sj/LA0vJsJ\nuG52YsGu3bnclJO0kcvKOEv/PMkyHw0CqWFlBxBztxS3c5km98HEKBgNkbec\nA7ucKFOejR9DSe6DXCUHSxv/7e402GceZ6Q1Th+pyc8m2s0nAEHKy05FIdHt\ngQS0JGBEzVLMEMDylL8fmF5wTdF15MJKMYIkyE2U/cv7IImvcNsLWwx0B6bp\n6fQD7yw5M+WJLzIzuABUOcUfF0aIZlJXYHc0ltcBXhOW6sNgg4D4NZp7B98s\nGYnRpx6SQjcx+MY4wtozEJ/AGR1seBjRIanfMj6PTp6CaxV2svEMpgRiCe5Z\nsH67djzfhubccWJzeo88yjmxh0lG/lTIb//C6Wey+v+vDsDBOG4f8o9+wPib\nwbh7u5eqYadrPSQbHmbHxu+540faLUMjAz0TXc+QRhJq2y5doSVhZ6kmHgni\nU5BV\r\n=xV9X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8Yz7RzgIipv8mF0aWbT92erc2j0tEzl9pUvWMY1B3eAIgU+9sjT41dT+3lzwIW3xWjZ7n0I76ZV3Xt1KL+e3nsMY="}]},"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-radio_0.19.0-canary.3f99af40.0_1600989697566_0.37501688208016737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.72aa1129.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-ripple":"0.19.0-canary.72aa1129.0","@material/radio":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-pFexo8hIAOw14i9fMOVXZgKhwS1YIKUy9TNxZA/gEwDHYsOaXWjle7XRNsyL9UcoRy3KK4max1KWo/Gt1Odcag==","shasum":"54ac4baff1f78a5a26fc34dd827cba4e5d784249","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.72aa1129.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwVCRA9TVsSAnZWagAAlI4P/3aOoD7c3ExaYZpxzPlV\n9np+lfW+eEcrxSnQ9Ml0bpJLcaJCZCzGirfwLw+hYoaRMraypdmggroitDB2\nR8kdmlui8DgpHFW0Fafno4xlEIG6VIA4qIhRaQ7fe/YBqcedPuPzXG/2ihf9\nx78N6xpZv6C+R5qJQBvCwwcQvbXF/28z5dXDTPTXedysvgeW6O2DVWMBKpyc\n6v/deZKde31p3Ik+YTxBE3bDz8o9orsIU+BEexfzpnVOuWkb8wVwVNZaIMrD\nAQ+seJT3QNuA+YShn0jk69t0qFI25px34WQOpX5eJ5V1rI9/YdphUccPzt3N\nBSG7vOcYOd+zI9VuQP51hcI50kiUIjrsvHZznq0fqyhYwfBgjYr3RMDhU820\najifG1fUY1neCCKu7xaMF6gPkfKQqm8IYxQuAFxHOGFPM3TchZLqdm8sG3ns\n5K1uZzEPn8HS+KDdbrk0g0gEwDGXNWKhdy94I8KCer2Mt56HXRQaXaVJ7qtx\nw7XyOkE626i8AeaUnU/VTtVkzGL02Er6lfkr9Oy6QX6x8PfXU8Xo7CyxkqPn\noGdAEnwkv2PkuApnZ26dO9fHznv4aSeoEHJ5Y9KXHQYbCO2SFkD6a7K5Obe5\nPcMtkIUhC3y4oblt4UGHnnceusV48FezNjrglQVhYXO74uNrF71gwtiqT6ka\nvolz\r\n=PjEj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2YWpvVh7R1nFkJx7lcSoadJVtf4RvTGs8KmsCMSjn5QIhAK3P7Pi8yREX/oH+sFHihEwrfXqI1d03BXUaAu+4Tk4d"}]},"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-radio_0.19.0-canary.72aa1129.0_1601068053148_0.5377300358722761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.394fd3f6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-ripple":"0.19.0-canary.394fd3f6.0","@material/radio":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HAKQQhPUAY4jc9IWUECtGbrPt6p6YKECNfCT4vbdpwyPkcPM7nL9/HQS8RXaNWhf0tuHPTq9W/9LugW5mGWSng==","shasum":"aaa4099fb442a19efa257d1b9db43bf64dd246ed","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.394fd3f6.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9ZCRA9TVsSAnZWagAA1C8QAJuX0oQCfWt3Xqmd/q8C\nH4jvE885K1mW3zAB5cO5boGjYh+H64XGusTdBJ9awMbawdN8v4Olq/82hZoO\n+wuVihnsvUURf4fDYizy5UEu9L9ME2SP81x0Sqz+cWoC1RqK/DQXG7Sgr/MY\n1QCRJT3lW6Z6w9pd9jU6uJaueiAn2MsEMUoyBwZzi/MDaUVzlwg2taBvh5C1\n9OTW4JJFtkznHYOTA6XeQEx6cgItuNDHmXnXGwAtiyovNXjPayKzzTAo8Hmi\ne8BBFe/RYMD0wiGzN43HhIdxq8HBbX+HQosk3wx6Sg7j9y3pLaxFhL/0MUtM\n/zSEoOmLr2+SfVpb5zurmcbSW6agU3PI0PGabjUrkisu4fWq/d0eCBMcuFIR\nTidaAcBnyOyoNBydZFCyCTLzUdxZL40YgC68ykWjvKy1ysqYLfPemVIFljbe\nnp+FTwAEn/dWxRnIhKY9ZF5V0XL2itRo44u0GU/BH6s6+tohhnVaWDjnwmPd\not3urydfMfA2MogpJdV9kOnc6yEl52u02R0afNcwaOC9dhvsBiHzqU4pNZ0z\nwuOQXm//3apsRothiZSgmBYqu23N2PNYtBTIQUNV2vGNKsUo2e6U4v2CP/pr\nUZWcuRLeFdDUZos3ZxHJMlIdIxZy0OZbIo45xbEblpYYiJ1fPkNrZHtgasw9\nIb+s\r\n=ocRw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxwLkIX/G/Roy8bQ4vwt8cmDuefy7hFuD4Re4WTM3PEQIgLI6WwprLzBC3BlaPxbb9VHxbTneJ0ZZfGyLpX6EMgp8="}]},"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-radio_0.19.0-canary.394fd3f6.0_1601302361092_0.6960733653311528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.347110f1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-ripple":"0.19.0-canary.347110f1.0","@material/radio":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-n1XF9u/G1gMXTbIXxVm0e8IFXFRbVYxwB+bXmCTtxQ/cbcaI+cd2witE7CCHEEPRalQV48aSfrAoAocxYxJnuA==","shasum":"3d4d25985e31b712587a5b20f0eff0dc283d598f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.347110f1.0.tgz","fileCount":18,"unpackedSize":96107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRcCRA9TVsSAnZWagAA4gwP/3dN/7Z3wiCfrvCwSyqy\ngfgLZ1pxTQNnpExpWVrri522VMMhFNkd7lKi1/oQ373U+eY+v3VLqPYQth8T\nSOlXxvgzzmlKCjea/BBg6w3XKolgOv+1iQpVxRQbbX2gxfCYdPwM1Ck+BqUN\nPMr9UeLjbxFiAeoKXV9Nyxk7lpP1IBNLKhukP4vfaP5DH4QYIjuIhsPwFhGD\nUzw8HPjqIiSer6EUM+3qIVeiPMxxo1EqRj6I7IlM2hlm7PrLYGWM82rWEKdd\n1xReJVvVwJt+DTGsgIH4iG6Fw7bm3t5nZS+ZUAr6QYyY4QZydAEo3wY/uagh\nmS3byaNGie6XhZAyW1emsWGX2ls0xEbXBgh4+AoAxJMe5qG3N92qtugjAqYf\nVOEycCGhmDwW+w01CYahl9zeEwhJfyWRxe5VHdKtUyjaeu0eEdRLUztaykog\nOUC8WmEC/wzov9NoxvXsEISQ159BdcfZ7jO0geckUvYVPOc4vip6kR3i9xlm\nVVyPFkRJ79ytcyZIwtX3FNUgKqq++hEUzrvo3lb4WJsAO3AuaumUIZnSz89U\nP1joJQuIFZO3IBcKRKq7NE+P2e9G2V2e6/qP1d2qk/IaKlUHRg0f7SZkX8Tc\nLfZx6BZTytcA0eufd9iAXEcY1M5h9wfhXZKXxp3bMC/eeyzrhfUdxTNbDplo\n1TrI\r\n=WHzW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2umm0rfcZ4gFOB+JvmeIXDGOZDORVSZKbYQBkPmuKRwIhAPSRLg59C/IopRK0tDRDjIe4fY2cc2LXxsyFOS/R1AQ8"}]},"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-radio_0.19.0-canary.347110f1.0_1601311835757_0.822084123403648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.5e330bb9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-ripple":"0.19.0-canary.5e330bb9.0","@material/radio":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.d4cd83a85.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-wYybyjDCDydKDtzRJEobxe7V7gV2S/rEUqAx/Ze4nAlICCGgoAuZhEcievhOOZhx+h3o3igQLMTsLALuoRojRQ==","shasum":"ef8da4e516eb35d153815f6c1a7ddff4ae4ad1dd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.5e330bb9.0.tgz","fileCount":18,"unpackedSize":98402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQA2CRA9TVsSAnZWagAArhoP/36R71tPgqJSfY2DeFq8\nSk0EoDhed4rD4c89WGRk5CuAebU2BhfelvIjYSfd5JuchCZ8icNriJx80sKT\n8jExVzkz/Y6dAKkhE9HpTcWB2LrQ+KRTEb17PZAay3t63YO+aNwp8gsffU63\nO5m2f5ecDd1D7CMht+Z5kDMGLrV1KhXqzi37MiobPx48oxBfwgb0L+7Njibr\nbERwkyJMdjAytu92RocAAIuZ3xVOvnUSBLxbKR62tZy5Y7IDgMBLV0UK4ArP\n3ONFvoVAPO7SSlSfWQks1sR6j0A8+IZFMd3nnn+dDnrUnv1NNw4Mcv0uxsvV\np5u0/FRNLMmSUJMfwYgb/r60uMNEaMOKY0uE2CwZpqZF4Rk1MXKRGCX22fvv\nWDkQxCP7PbVH4YXyvWbMxiYMrhA7BSBjRNEB+2amntzDfXfyCZTtj1j8sGZS\nhihndT8JmI+ByBLfnVxEi9izRWz9Rbt4didIncwX+ZMGPL3dVCIyrWTdl16i\n1mybV4YiJ2/xeNsYXZMKIJ+HcW/pNsZdBCBGYBevrEwyAYd5g02GDp1xRKVL\nEDaSOwp26MyIIqAchYGLHudzuPSVPDjGlbapnvYUXxwDAnmk6rAH0QtRFTTh\ng1gbM19b3+QXw6X1eWZMoKVDka1vvZP/IM1yEvFLiu5rERIjXUaJqzzwQhZm\nNPLY\r\n=sbrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICODjcsJLlTIxLIplIpQN4NaSasnlkBLzB1KoQpzuMfdAiAu6Y/c9l43hrJlwsL8c4hWVZnsI3zciuFsLEmyaL+Jcw=="}]},"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-radio_0.19.0-canary.5e330bb9.0_1601503285643_0.6742152558668668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-ripple":"0.19.0-canary.30b9e3a9.0","@material/radio":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-au3vrcGE2IGHSSOGYV7JXXnBqlMQhiB+RJ4QGOo15eD1q17omU7GLrr/OlLg5phTEedlxFim4ZwoWOCZ4kiLWg==","shasum":"354a49308e9ae64b7b834e86707e8ff429ea6314","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.30b9e3a9.0.tgz","fileCount":18,"unpackedSize":98402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjeCRA9TVsSAnZWagAAl2UP/jiUfYzjQJZ5Rd2co6CV\nipzQ6/5G4h1lcEw+MB0FmNcnliM/bDTNMlDkPEnlb5nLXkGhBt2lof0Fg5b/\nRPyhy2UKxLGN5q7viFfuVVT54coXJ7h7/77rQi6X20oQL+fHvCdnWoPXSDD/\nutqTG9EuYpRylqJd280EZNDNNtgTj35xijaFe00vOZ19mpuY1N3/KzfbNkeS\nlnO42Ah6IFFkp3gLATF9VoHMZM8f5w0mu1ew32Z33t7CUD36yjbONgT0LVHs\nBzljZWijFQ2qsFOzzYgcl7YbWjsBo2RmuGlp1AKJVTF6mK0H9QCuWv/y1rBX\nUYi9XiEpC558eQSRItDNQNxJHXrn+GLCJ73H/qNsb0+rbzw78HNjxrS31M73\nY7/e1kGe7bzzm9M/MsdOqCGZvDStxanCEidzZ+4inc8Hzp8lVI8si/tndO4d\nUdL67JEyeZ0Y7jl3bWvTVL5tUMyiJhDF7npgArmq55Q/BifBIDnbv8Pj7cuu\nMfmQP8NpT2rkZEoiUC/B5Y1HNd0PkB3zNs3sCRISHszqZdvPFadO3YI2cnmI\nCKguJdgNETHRE8BzHyk700jmCH1W/9ZZXR3/hN5qZ7HMlGiIWPUPDcCFpdif\nMirEK93V8SNSUir0PyazWSG4lYdWGUm0assGd3h6kL9HwEVH1teIqRD9fx+V\nB3r4\r\n=gj/P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWxDiC38a7/AOid86Ze4uWJ0zVhRZihk1ZuxjmFgtmjwIhALVLpQN/K+smFuQT8s2MWk4JY3hhTl8wivaBtB9I/4rc"}]},"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-radio_0.19.0-canary.30b9e3a9.0_1601505502573_0.02201851694294188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-ripple":"0.19.0-canary.7bb04b9a.0","@material/radio":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-wsyzjXkRr8dkN3Dn2gWwH53XhhvigxVKPjWGECC+LneJQQM0cjNzhkxE/lYbB5fK/mfK497/Oa2rGeqDhP2x0g==","shasum":"16e61061b6168c72d72120f0da2a548558dabd38","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.7bb04b9a.0.tgz","fileCount":18,"unpackedSize":98390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTlCRA9TVsSAnZWagAAhykP/RRwcLb5Iv0G3+Ok78bR\nY/kfaJolicTtLAhoeAKDVr1FY/xTF+QEv2Dc5/A/jXIWeWug/1ORT7Iu0tis\njuJMWvVynf3A1yQZQeD/VVcNsjLZXsSBVV785sEzU7HysVqkEmpqK5+P4Goz\ntK9xAtwSq+yJ3ZCan48pA8+ZLsfLAjHIZ7LXDCORNfbEvGugtEKDoF6q2lPT\nDpENCmUmgKIzbhToxfoQ7Hd22qJV0r0Oy1nZ9l/jBAI+IMgnv4tSjvcuo4/M\nMKrLPjSBAGmhCCRN21BbjTzpBERM6j0RtIMf2KLVD73F8z9hjPV205utrSqK\n9R+E+Ji37frql3DmUBaRoX7M6NUl0Y7b9zR3r/ea864iLzroJ1LXlmvsBtO/\ncVJXSKyynW9pWdxc2bY05Hc8kjhI3L2RbRJteB+e9GB44sFqc73t65HlzlqY\nmn6Q9C06GZF3PreMRH4O7rKzbegetP4Ev+iy+AbiRf0FqJFJRi/grSHgWRH9\n3hK6OET/uFxQFjbHXRVNLtuctUdLEtsyul/3F5snUKfFfZl772V7Kelq5n4x\nvLBeL8tEfBpsNkkjImVicAE7QaSNMCczFd/ZUR545BEficVKfeXeQbYJZ3Eh\nc4p2X5sbWkhwrbbDy85vnsvcC1MmEt6Nq/+RIESVc9HQFJe8I3qh33jSjtXa\nNW2r\r\n=V3mt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMNZEdoO13CxV4d7bfZkmEB5jxumsSGoHGwVr53pPW+wIhAMBvC9Nxrl4GuUmy5xDJ6WmGaYzKlEYC6ciGYVBTkOTp"}]},"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-radio_0.19.0-canary.7bb04b9a.0_1601594597395_0.029947643720069195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.615d861d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-ripple":"0.19.0-canary.615d861d.0","@material/radio":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-wXv/WaheliWPWc4qNT3b2CaDues3V9vAPmsSIEm/BqZp9qissFQyqJlgjg6RfIoC740TMfVP8qQ3Xb7LArK4nw==","shasum":"8f21fd83ee5a864fbb61762606d931144a26501b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.615d861d.0.tgz","fileCount":18,"unpackedSize":98390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNvCRA9TVsSAnZWagAAAAIP/1nw63+yxHmw3H82DLYy\nXhvUTQ9Gl2rAG1zxdn5+YAx+dSwnzqZjBjMewS6mYvMZaLVBe9PH+xSnL8bM\nKyymCI9kO6QB5DBmo0TsU9zPrQl4O78CgOMzNFO2FYCwsO2ieJDkehGnc1+/\ng4kbtea+vXI6axb0Km5whe+ppNXULVglUJaND/7zQgJ3yQqWLipSdGBwwTZO\nVM0LsJjLvnL3dB7yfqhSaIBA97a0lc9VUaM7dgLhiTPgDvHXbtV8Z26tXt5p\naSxGe+qR8pJY6FWw691B0On1SdsbHMBjkDyyHukSTQjfvWxozchXt0ZdATW9\nfaLaDvP9lLCjbnhEDfXD7OviK8PelejHfC/JNrSkgb4QwQgklHJQANrZFpsk\nlks1rOTMxWqQfFQNBtunDFNruvcZaFDAnJKoE16wTD9h8+EMj+7DVyXBT6yk\n6TOAreFWGF6AaFXjFkX+e5NzWKGjEmhckEn5+SdPZhjOzXapj+pmmZPRsagG\nVsQMBBhwgXES4B0cdlgKpdoaaIWEd1syTdCs62y7T/tdCtlid2qWRmSYJUnT\n09on3aH+90ZDS9y1LmdDQ8Iem9HA/3jaaKwOQ3BxElHqeoJlsU6jpnXV1ZCJ\nJK64bfCp+lHTuKNJF8mzTHemcvYSgvzd4bWKsGj4qAAnnuJ/7xkidifYdEV8\nZPV6\r\n=gJbs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDNEaHS239HhAYyNApBV7vgNqMNRBbi9EhqZ+8DDXXZ2AiBqztCylHZ8qyjDE9yAlaj2j3x5jkmY9Ehh9oke0Ks46g=="}]},"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-radio_0.19.0-canary.615d861d.0_1601602415284_0.4234207405806847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.af110e86.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-ripple":"0.19.0-canary.af110e86.0","@material/radio":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.38ef4501f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-wVmGivJeZDI/JwxCfDifiDqjAhxrToeiRJYAt75JK/eeLA6MYh65qzyH2u4f2Xfwf50+QrGA0hoJzA8fbJ1JOQ==","shasum":"f3e110d5c70a2b875c293fa46b544ed7a142111f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.af110e86.0.tgz","fileCount":18,"unpackedSize":98390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yvCRA9TVsSAnZWagAAQGcP/14emwAFxkEBjfojfmU+\nWMdPj25we6oy8Ce9GaFZwnzKL2b1EmGOaUFsXzDTC3occPganXPFWSojwAWq\nq0yl5vPmbYlxlzgBthBOfSCsF2JTdk2aOZN42hJtZ0sx4+Z1IF0L9L3g6no1\nyaeWm5moK7r9PBRIQ8eA383A4e0wUBcXsb6nOUjKMtsvBPhlbKBo8E+6MNzG\nmzsOwSAaS1MOIu2NxnrqWzq0n7JZHJGo/ardRvT2vMXUMM/KM0Xr4rcf1TKz\n9mjH3MzT2aAJ+VCGZLtmVqcWYu/UmIo7SaXSFAXcyOQYYaKyaAJkDxCBlsQ8\nA8JJtony4FmSpuk/ssm8CkHfMSlTx1ciTle1BIOdjcsZ+Kyc9z1z5z5/CWXp\nFAQqAwHmgOL3xzjH9gHx1PrvXDj4nukiOrbrwjn6Xp7tnE5pgzJdHLcZgAV3\nZNcJTkGKFkwF7PYHkzR8iySl7eO55JAMIEqlxOxxaW9+HVFeNV0cPw6U4qkq\n/CWDFj9+xKoMm9SkAt3tU37HUTWmauiaF1X0FQwvVLW2N6f0XamPOx49UZZk\nkELffalGcvnFrxE6Y49xwVIqgO72wbUmHRGQkgvbS/r8ucdQkyJuzbPAbmLv\nho936NXAEcR0ylHNjwCMvoM6KDemGkH6CdLUBcxp1oPncWarRxYdfHNxOrrt\nQ2Cb\r\n=dVu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc5fTDwDTUOw8Taj4l/qN1VDTxW0LbAQ2on32b7b8NagIgVSzbwZnxqQC5Roh4qocc6PAkibpF+3RJZOQf2hIX2xY="}]},"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-radio_0.19.0-canary.af110e86.0_1601682607193_0.5172927744998299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.89d27ca5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-ripple":"0.19.0-canary.89d27ca5.0","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DTlGL417EL7vZppZCwU1Eq1SDkYxaMlXF3wH/QP5sWiyBCRCYrAtUAU4mx88i+4cwey/usSgU4oASMUS6A5xyQ==","shasum":"a0eaf362837102345e14d02aab68daeb2648d937","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.89d27ca5.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8f2CRA9TVsSAnZWagAAHRsP/iScvtiN0RP91RgefHpA\nkmZ+Js34WzjfvkZFIxvymiJ47Ryz3n/hg/pkCqPHcBysAenAOu0jfrXTfDxF\n2rCaAPR7kwmA4oMq2iy+Ua1HRDGriM+kAmARiOL7dxe9TKX1Ncwv4RxbQtYL\nZ4rIv8SUUKpOTFOfLKbZuhzmutf0U5Qe355uw4b7uNlzxi0BuzZll88M8Aeb\nDJb9CmoUVWzCT4i2m+ae0wTAFGeYQa/QixR1bdV2LoClpi1m4RKV6tCACgdb\nb8J9i6z23xIorj71uGhZceF622avxPYugWPxTIGx0GFVzl64NYuo1XaZIi0j\nAqtrBWMOwD6/Zi3C+g7VEJIg5z70zxraKVAVZ3E2oHPmpF0bG0RPnkGKCHbE\n1rM69g7yiTjBrHtRqxuriHM5oT7BDMi31GsA+sqoW1xztYznYnq6PpUqGyoF\nOO98PmuaBnERk5AVF+XvGv9yNg44I3uG1mMzlnnmcnYy5CQ8bsEpVMe9Zno6\ncxA7mxqf4Loi602YUPLSSXiYbJdlltqM4vaV2eV/B9J8JN8UpQubSf1V5eit\nzdT/iAFJj2yrDmlI7ozw/X2YB7CQmNSX38pszP5CoVgRsXbi2sx3rhMKuhL6\nqJ5dHrChmFyX+Whf63g5GRzfgYkEfyW0Ra4jO7DGriRw0vtlUXQqZ9aU4rWB\nmxFM\r\n=+NQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuvNmi7jz0WusM/OI0ySbZAa9nxHFIAx1ajse0Hj0Z0AIhAIcoSSgR1eiYzZsSqfv5oh5Gk/lzZiiOHJVk6S+Jf1aA"}]},"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-radio_0.19.0-canary.89d27ca5.0_1601947638072_0.12082569935624021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-ripple":"0.19.0-canary.9ef2e7c2.0","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6kGBnggd4ysEUjQ9FJUfosx3qir003AH8beEntmjoJ74NErP/or1fWY7lImgSYBDipoc9WU4nkrCUqMETEnOvw==","shasum":"84fe753057f334ead0790add64e05d85b39f5fd7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhqCRA9TVsSAnZWagAAJWcP/RVUBKt8+H7/NGYcKwoJ\nXTQKyGpQbk242zcR7P5dnljwxixguF54J5gyrBSGpFMPgNxV+9+GtiZ2zl5C\nm4351h1SMgcU2jx+YzSPcrZx83p6kF9rtkc46GVorc96IMcI/ftncrVxXAUE\nmUQbZqd2GIZBYyLPTNILmQU+3+4VCys1EaQ+fYYEAU76Jcd64QJ+bvBI/0IM\nWIok+V4gMOJZG1a/Rvsq3iPfPb6X43lJhMkCfYTcbmyvooE21oZLf0AM+jXv\nORz9MbClY2gLIbsrT88N6Rv6Mt2PiYt+pYl/R0LQSnWxKT5KWG6J6SXO/JAK\nqw0P5Rck77FnwWASbcO1TwiU/NIayfQw0yXA+7pocGKJnyYJCAKEu/0SFdeN\n7EeQI3SFHWYYJAnk/9G65/uzgryFCIRLGIG1BdkLNbcPSYwV7KgW7yCHaisq\n9vg22WGcvA1F0fLvEbiDQzNUg6XuF9L2Nnf0rjOM+oeWWvUUMGQzLuCPi1JZ\nkctlbYf6c6Aw4Cy2w3XnUw0foybuoHD3WM7mkfIThN9FWpTbA+5ty/8Lnz/7\nYAZCeLSDTPn1CVoED+2wCX3278Hr+MPYBmqh+qdJH3MLqJLtl5kPrnQb4/re\nG1zStRaeInpffmoxomK6l3cQ4O5C2D/E3o1se1zXtM0nvO9stxqVGm4C2gQl\nkTIT\r\n=O458\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1C8g4sqt4BOLUBIKHekogP7Xz2jva0u9s9ZIiRPaC+AiEAkGT+kEMBvl45qbmnJdaMWqdl4qFsXbW6wDvzvmpxdNk="}]},"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-radio_0.19.0-canary.9ef2e7c2.0_1602029673818_0.7254937094599305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-radio","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-ripple":"0.19.0-canary.96c8bdc1.0","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-tKan6xlUwX0X5ReriJUdD9L++YIAxEEcTUhNv2D0Y7y4dCCdgT3H1eKHFBQ+KHX2952FL0i+kW25jU91iC7POg==","shasum":"c30d58805a4ead0ec1e5a5e42e5a9f936fd02be6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0-canary.96c8bdc1.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAcCRA9TVsSAnZWagAAtx4P/RnQFXC6S9UGfHnBfB3F\n4jp36yGxhPWZioKn5Gu1CWu3ZLEzdIeofjOc9LlzYmECXUTeENe7MWa4vlMU\nv7LLUq2HGKyuqCbBL+PyZ1GrXn3K41z5kGPJQeowIBKhlvV4tmnTZRVINPi/\nlQUGXVH78GqTrXCwhrLFaaqdrbjFnwhf/I6kUj/O5PFYiynuWm/+lZYqTJ+W\nBIaFN3l4HyKt2u75cpHauQpHqaWY4wlLvvAcCAtnr42EItADkcwGP5x9bAu/\ntKCN2mmHT/P7ck2It4cJ+xLPz37Wee2lIH39/kK8plYfRl6AjG5Q+F0HEJB3\nJ8+OCdcBvv8iZojoPCSFIfebd4ESQbpcy+3hhNGhG+LVEWHk1HmplORbnK+E\niXw49quo+pMlUuLUVdIQHsp3iMsbjI+4ZDZcDM+ODBzt2Ugn+gc6cL6qA78V\nwX7H3yqauZGcZ5Bdr1ETfkuWnzG84bZo44fPrJqsHvilSUsbs0Tu9TUegyPz\n+rcw9Z+pcHPVmCSuEscAaAvA+OlHUY0VKtAkeVVTXPlm4RohsjKXy1rZfvk9\nvSkCYVFk75T4YOUtLrkhshUi1o/TmuVx3RwwAgiHJQdx2H0f2sYb4V+Ab5z7\nOXwsE2exYS5Fa8M5dfyIy17lEHgcjD0EDdJJvDbTetANY+B84H7ieWWVnaYH\nUbak\r\n=KWDg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAzXkqN8aP64GhRBOQSKyYDtT4jIwHgPRGIXQvWVOYAkAiB04gQvJfE6M53rGzn+bbktPjpRxIri/m43lwcknYJm7w=="}]},"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-radio_0.19.0-canary.96c8bdc1.0_1602101276112_0.18819031269231212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.6c21f034.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-ripple":"0.20.0-canary.6c21f034.0","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vvwdjEoihqsqN3OUnad7tRj7M0BzWvUSG9im0aPsr3jRKC7CrSDLJUpjRbo93++r8Xl0FTdJe6NDxVa2CRCz7g==","shasum":"e804e3bc6d50959b24f5bd00b2cbc64fe20ee9c8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.6c21f034.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGRCRA9TVsSAnZWagAAfJgP/3icI9dFOcFUAGsu8DXX\nFyykwhFrHShxrrL3DgyXG6xVONHm41UcICyzAawrLGv+IUyem0HsBO+QF9GU\nmsSh/1bvt2ef8hvij555SyTGFLMTTS5/AaQQ88+T785+g/49Qre1EsbJoVme\n8/EwZjZC9m4d7vVQlA5xvr2otTc3Ag8+Hnhy6lx9GTFDygBL8T+p+5ifKusP\nuGSi4ZjwiwyvWcMHvRiwH+6IwRd8uM/nkfmjqCOT+49uGhBZQ9SpaZtTGsGi\n839RE7yq2n9f7Px6ApOjx3LZqx57i39RSgkTC/wu+ZTQQjKgLS6Xvbaq2SwJ\nThrXoBzwlEl3sTlcWzwUTBsgTrOZOF3hFEIczy4lpBJYuh27s8QNtHL2YOXt\nuyn5lW3/3qWbpmDl1WaUoMyRsHjxksM70unSqcGHFrDXDayhy4jFUMkpaIOB\nPcVE3jvwADLm7s194zxwIMTHeRnSRpl1ra8CYDG+Ahh6VjQKhHM/X55t3T42\nfwE6eamI0QUERRP8ZPjSDDmiyTQmANzQyAbAEfXphGvMDX7Gljg9p5hGddK9\nX15BeO2kXMGdGnVbe8coM5xg1JQsqR5xwBLoTdEYop4+m/2i2OSJfTr2shzZ\n78war1j1U8FviZfu7pVxpE2jxugGeHisDwNg14TxvOG3Xdcn38kA0YVKijKl\nwhG6\r\n=nfKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCHY0mC4AG/YbvCtgBkBevm7d3z2WegmFgXNdDTfMXzQIgVzmMgk4+SYq43TuGbQOW/EIzzy7fra8PuJEwnU9kJNs="}]},"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-radio_0.20.0-canary.6c21f034.0_1602109841276_0.04035243512901099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-radio","version":"0.19.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.0","@material/mwc-ripple":"^0.19.0","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"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-radio@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-bwsLAG/jmYUNyEILObKy2cQ4a2ilS6/XvyWAvWtg3rKrgz3iXHQBUxrdgx+vkGInKWDf+AzYWpo37nBgXjjtJg==","shasum":"4aeb8e67f6f21f8df00563aa6e1cfe229a4f3491","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.0.tgz","fileCount":18,"unpackedSize":99864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIzCRA9TVsSAnZWagAAsfIQAI+g9MKe9VsJ086H9gFg\ne0DwlIS7U1AviKcOxiVQNsePKy2nnVX93jQ9B15+mn+wHtzldqSW82zm/HsC\n2C1YV2rOtfJlxqSe0FMqXMXiR8ns2bldYMIL1r9983y6ZWf2CcUg4u2wl0IR\n+vxVpz2pCNn0L7Z3VY6w4jcyQRxqgVqeEYWpldn8hpyKWXF5R6UEIDZvh0g4\nCQ/KtM8sdxN7IQFvD4B9AHjCGZeY0RxfwH5r0ZlkAaROauXIGuXaF6uv3u+H\nc8v+kL92HTd12yITHC8S/uJi1/8ZBINAmwxxCU+ZZBQOBEicUOuaa+Od9FQX\nqe6IlMPhx6hequjourlADaz1fsrapuJnQSkRJ1oUeEPmW5oR7ghJ9aYxr0jm\nAJw0C+kwOcCS0hUj4OvfCUjsBr/83cUKQwYgyVWVpTFLiaVXgJuNk98IX6l8\ngjk++yVnVS907UcFLcWun5SQCX6as1ZjkrkND/RRVBWbVYlvQUCE+ets0mhy\nv+oA1+zvtuqBHyBf3Gxv4kmIucUUp69kTRDYcoumXZYN7Sz1hR4hBPl/RYaG\nCaDtRPKK0bSa9MqSlk5ZGJvMcWhFl33boKuD/0STib67wGYlhaymwuMRN4cc\n4c+preCgp+/zAmMqxT2PHRTjc41Jo0PmQ2y/Zqg/Yo8k9xoAF2EM773bpWvB\nojrT\r\n=ldEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+6xVmap8L98OTuIx0nacMByFjRgIsKqVumZ2oiks9iAiEAsxTn1p+/m3Sjql9b0WtK13ax7k0wK0/Vy/7ptuquotc="}]},"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-radio_0.19.0_1602110003518_0.8339839881729396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.1f026aaa.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-ripple":"0.20.0-canary.1f026aaa.0","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-H+vGrOBEMw7hNB4PeySTEM8j6VUpsCjmBcd6j3oWYVDtW18YQOzDzTIKYsbIzl9Af+sRCgawrdIk88tHUkH9jA==","shasum":"b4fbcd2b5dccad1f2c7052adc6ce9fb5384f2d4a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.1f026aaa.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5iBCRA9TVsSAnZWagAAo/cP+wcoOE1JqnHHtf7+34QR\nbW3UKKO6ruNAPErQSSGjrMOjUdGNKMz4LygS5qatHslfABnY4qu/b2gYVWhw\nfSBjsIPqWSFZAdAkPGpivoPOtF1uzXPoiqmKpTxm53RCzdjVr3YXhsBOgRut\nLbtGePJGDTSQTRLdYn7aCvHFJwP06A0Jry4tDh4mWC1NvO5a1qpD8wwDuj6z\nC80NkOBa5nNP9jeCZhggqC6LF9zv8qln9qkdt+B/7A3m+waItoLdMtv5t2Ev\nbQrQ4KMli8kyah4Z5GSJ3FArOKMquCyv31LW9EQCnYfFBcEujudDnu154OLM\nbMir+dWdypSZ/VXCpyjQpmuaTmj4ESPQI5RoXPLxw9uB1iZZ+r+13xDFSeOJ\n4GVBp44KbLvu9xKS7FZwCXDW8oCMgPs1cJEPHIke0Jzt5zZPa4Fgr61ixyC4\nLT+FaOvsCbzDe/fi/CXrGWfvttdjTMTp2A+qE1Uz5lV8PuSUN9TPqGm4+1ng\nd25XO9Ay8OBynCakAtpJ7DjkUJDTpPLdFfkTEP5TMAIrqMkxAoPy06Jd686H\nHCXmlYgk8yhLmkHmBYvOSpmyV86MGkfbZQW3YP1ua/v55N4L78JSgoRppSNb\nf4Dlx4bBZ0BemTAdlgw0ktdZ47P9q+3p/GcQvIKKiyx5H5egfWjUYYsaoCi3\n65Ij\r\n=aCfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIDQuESbeIv8IH6fum6WAqZ97Zdy20xDTlLlAnUd7ozgIhAO3AXwUBDeh+GCg9MEkfaINCwXuHSLa57Rp2z2zhHziL"}]},"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-radio_0.20.0-canary.1f026aaa.0_1602197632995_0.6290029952942156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-radio","version":"0.19.1","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.1","@material/mwc-ripple":"^0.19.1","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"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-radio@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-njCfLygvHbDD4L2K85yZOHVZtkq9HNhbpieboPmxyrvg7+VN0txP5URp32jBdEGQoi+KaPJirm+BzIeB/r1wTA==","shasum":"4323da75e718fbb497971728b60dc3ddef7ed440","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.19.1.tgz","fileCount":18,"unpackedSize":99864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tSCRA9TVsSAnZWagAA5PYQAJXDpQXO5Ieougi6K8Ys\nZJqmlxm8qLZBlvAv9PizuQ1w/9pX+fExJdzVMXFZJlrYzIJ7227AFpAXVhli\nenCMhUGnNh2eQNpP/kq5f83Fa0aN6I/cnV95mTE6jNvaF82/clVzRoPMA6iN\nvpMsaoBcuFj7bWv85Yt/sY4j4QsZzAUxbCM7BSKlQZuuX45JnFS8eixTHtKT\n3BttohGB7cJ5aalUe+NkA+0SWhIxyh93rSfmhvL2vkSZpVQwjEsU26hoefcf\nFUC0EoPu7V8W6UJeyuGrf3D2f3naXImKpiJK6onWO8EvIfHKfI1Fx0kcBxuu\nq1h6se3CJuBFc7VxcbjtfWCb0aeVVgjAaGQ3BfWQxYfyX9xyyqSnYT7aZeL3\n1PWvCH7GDZE9nO0DrNtZEAhJwo/yx9JREY9sbBpd3ET6K2p50N+7Mz1/l+S7\nCmm9tzIy5p246WfucQO1TuQG/0yuxF/ZeFfNlCv79D22fqX7wWp8oeH3vw7b\nE17ySQlugDoQJoBJdyp4wbM9WF55xN+DIGDYtBgovkcDPxuHFGC0hoIfXZ5e\nCK5+PocoS1nCfDVKlRUsOEr2bbnov6FlE9Njt7qimuYcN4f83/pkSINt8Sfc\nBzRc74zUJKVT1PTK2OPy7GzQ7fp1fAQiqaiOJ3uhB7/ncGiTGy37UskDpgTf\ndFWA\r\n=DDk9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCu5C5nlVEu19Tdlq7wKrLOcYpuE5ujpTwNyE2jtOaB/gIhAOYP355rME5gIrtuTfcH5nAUYqHqMleZLrbCDuxjFK1n"}]},"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-radio_0.19.1_1602198354050_0.31895608470703607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.5f6894b1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-ripple":"0.20.0-canary.5f6894b1.0","@material/radio":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.774dcfc8e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-u1SAIH2RaPmXPmzDzIw7ohWtm1FpcMZMeXgCBJtuvyjLsvODTx0F/2ziIxOQZa0lDi4aL7Mc8mjC/VnSv5TwzA==","shasum":"f19c1364a54db3864432602b23074ee7d58d52d6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.5f6894b1.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5upCRA9TVsSAnZWagAAMSIP/A6TI88wSV0GyO0TtbKm\nHiO7m1R7bJ7viLxbSBMSAETj0PJKp44rGiTYDGEtonsxdOeVyMk/Dsid3vC2\nVLWzj4bYItkBvN6Zzs3tSUBR4r9IBWmBRRXQr/PeNBQOW45sdMHXc/EbDGKl\nO5tJWBBOcmtk/Mqb2CVTtgruphs4F/OdYHMhbLxNcoq7V7MfRJCr2IWzp+xy\ncFKoF1nyc4jD33cYzbUVw9Yxerfag4sD8BXAHsAD4re3jnkFuOfuoNSDVIgv\nhJjZGArxfNzFFA4A9ENWh24+vFQirnSkbTijFDgMDimLs4vmdwFJIK+WlMfj\npA4Ot36n6VCElahlQ3FOH1DYMCfF6EbjnEB5vZKEL5sE464r4G706eSonpk2\ncBTLtygtzIdsYTzQ9SoG8a+s/lkjM46CQT6O0UBxQzXQ2LCuzL5i6HmlBuH0\n0sb9GSvQJofToCjjfDDDiQ9B4pFHqPBju3VBaqvn5HLQ8KfiB3ZsGov7pwbA\nXtu1c2s5dPus9/A5P8iX7Kkm1eEV7YlMym429R8V5jKpzIe39sliLhKXuiCM\nhBZnJejd5OgS27QYcMa4LOHLusyg1tHJ4keKDbMvXsOz3MxpJc87mrk2+d9e\na6Hg9fPSetpHFooA79n0bAj/CRQsa15TIuPGlGCQV+ss0I7U+q+0GA1yaNXs\n/iJ+\r\n=G2LE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5AK4AmN7T8fH3SVuJWxf+MA8+OE3MiKvjRnanrlrHIwIhAPYtbZilFOPQOdJ3ESRGzZqFQ9Rz9dMz8Uc7r4DtQrq3"}]},"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-radio_0.20.0-canary.5f6894b1.0_1602198440661_0.903861983980734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.f6260d06.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-ripple":"0.20.0-canary.f6260d06.0","@material/radio":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.8a39352c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-yLbFfjyoIhPFFZ21t0SnMuJL+zIsPYkc3I+25ioco/3NBue79t/y5ocdNGd8FFKyPAOqiPGrjrkseU3nMTPSPw==","shasum":"fd9511728b1d7c2e49111e2edcabd8f3f14cbadb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.f6260d06.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNn2CRA9TVsSAnZWagAAdnYP/0ty4guBIm5syDO7llLD\n3Li/+LLXYbz9lLGuKxyDHBlmJ8wLOT4jiofwrNqmTtNAG5FY46fQFMbh3cuC\na6NLEwTxmu9UWwcvKEmmuNSVWCGvUdwSLT6Ors6tpe6ucmR4BJfrGK8fpo8g\ntuhNULLfmalCPi8gfxQvn4e/aplpZt0X8HrLyiXscLqr+RKsKS1cX2HuGjnu\ncWx4FMPIOfJRE0rC/2uc8eAXRGypWdYHQtWCOCm54wGayyYklZUmRX0FardU\niN5cOASAOeVZb9qc8DhxVY25ThWLqdRlFY1ICLjAWiYaCeZ4sdovHs4YmfNT\nwAFSKbrzYgXkXGlCFYI9xc/FWlaLdP0h8gl6zxQLvCl+XsBvCyRr51N84AHH\nbic9pkKz+qP3f3kxO/KIxVM/gDJig5Mm9K1gFptRThypBSawpN5CDtz+354h\nAWWmTGaKo2wmmj20RBv7ghd0eDBVcZh7AYCbmCaxTH94W24C6tZF7nA+zbgi\naaRORBrk2iTtXssuH2Xl+C1IPMN2I2ZLIewZlw29IU0414kmB/9JqrCpgShI\nyNArP/RxFl0aC24I+KfWforYKvIYQYvqw9ZvWtq4Ee2PIuan0XOGW/28WD4l\nEjAjSnOMlC28Ga0OWrYsV2IQBRFGraT9tb4flOEW0Ycbr0ZgbV80cYitI317\nlJV/\r\n=k9Vk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHm2RzIfeVFn+D11Jz5Yl0T4nhYSN3Es/krC0sEvu3cUAiArNzcfU/2XHoOCieRLjREWsImOVMjiEO6phUIamF1Cig=="}]},"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-radio_0.20.0-canary.f6260d06.0_1602542069661_0.9440593804396968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-ripple":"0.20.0-canary.2d1b08aa.0","@material/radio":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.8a39352c8.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-OYTxrat1Nh5jgmujAC8O4psItQWYS5uI3RuNDLAn3vwVKMbYAFOmQzSUraisH0gizFhvep8qeHsYKAVy99ZGMQ==","shasum":"4cb1d5d4d3620d0502c6c61370e18f0c46e6978b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.2d1b08aa.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5xCRA9TVsSAnZWagAA1LwQAIbQVAW+PvafemipqAYN\nPSAH+3i1eyZGrSWD5+inZyyvDvRAGsDt8bUDlfVOCk3CpJ7qUxNH1pg+2BQ+\nj2Ka1WyxotK8Y75fxKit/2jqAmz8PYZFX09HivykLzZ1dfgvK5Mv+AEC84m2\nk2ahbmM+InbycV8wNruZ+u+7s63M8L0Q3bfhMkIHKfMiHKcnqN6sFUsU5Q3x\njUoL3EAQwVYSJ+DlsalRzkJDB18I0HgeMAR8mVRWNzwWFZFJ69mAlokZwmgt\n5oeEEMy5VJZOma0hlIrBSyifxPJNAJkHSIBugPI40PPNCagf2CKCF+yxEYWH\nviCnY/CB5Cx6sLF3bUTwNoq2kUyojWfEti2Bk1MO/Xl6AB/3KxRNZXIr86cS\nevODjHW0GMSUK6r5Kc265C6hrsLiK/TlD6W78krCw3axbuAlDs662S4GJIs3\na04OLXpEkQgsxroj0BMrrhqC39btG5mOo2/DMX0B/WkiEeSu2Hmk5U4q6zQ4\nwBGhVpkiqoFIb6psTs5GcsXh8ohZT0a9+m4QU/Eb2okB6u7UKIPYZUrb5PFa\ncaMVTZ8LNgy73eFbsdfobwPxCxoqZ+pKTim4tCKVbWjUWAx0lBUz/ox6JVI7\nePPNM1UTtC5eBrR6hVx0Wotgh9VN1sMi8OKh8xoG/1X8hUPymBpegRADLtqz\n0Q0W\r\n=VqC5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJhwSP+d38QgjCakA5J8E7ueSE0VsV9iWLrqa46ZjkvgIgQSt/Kw6ymftwQnvKW85qaerGLgvvM8Pk30HY2gsWOp4="}]},"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-radio_0.20.0-canary.2d1b08aa.0_1602616945282_0.7217539086909532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.5bd58844.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-ripple":"0.20.0-canary.5bd58844.0","@material/radio":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.790ca85fd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-jAvDCxItitA2r3wCE53g00knoFitRc7ZASJ1Idn2lLl3qjMJs6D243N6hczeFX5ThSeJGWG5g1FOkqUGuDir0g==","shasum":"8a876cd291d017389acaa1a52da0fd37e46ba41b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.5bd58844.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxWCRA9TVsSAnZWagAAhCsP/AhQVFxqUEbTgYLAc3iO\nhpsywBFVgyKTnXco2OV1Q2Gjg+HPhcA3JP7Uv1msFoOyjXq/OvRM6V7Gmnh3\nFa4FYivssqz3N60bpe6/RXnPSgI7xQOS/Hu/9Opb1buNZ8Dnuc55pNBbTkI2\nHQvTOVxfV+8u9rMa/WI+KO2WhEbUwjQVv7O3lWIi0Xk3+LjkDGQvtl6d/RMh\nYiB0QUUL4GpJi72jpwsUXXHVpFHat+AqLgQVbgwKe3z8Aaw9tevLDcDD5dvV\n7Cr/UTWv2xlUxJSMlXwWLjv1zapaYqaaARNLH986sxXPN7N00BLVQzuvHW0C\nRyrdAIempm0YthzkRiazLleCvwePjg2+zqmDcJW4PU6tI+LtqZLhQL78fCA9\nz9btITLAcbuYHT0snGyA3lHHMYd4FqOxxqxnDRJyS07T6HcWDbDMkCGYQKVK\nHxSLfl5V5hVcnfZV6Ak4viFxAWUyP1jMRJNog5bHPpehgdHo0dXqiY3P8kOt\nTEOvoVWVQJMiLCsr58WZrLf0KSLVqPKbxPXzOjHAgg+p60U0k0UJlSg9tKlb\nsNgppXQCnSsyg5+/NUo5n4T0TDu6vezQf1QZtMUdi+yfoVeeLdl7Qo9yuslw\nAwnwRvLP9Pw+xD37UfTXSoor46S7GhuyB/BgykVl7VPgVftkbIqYSE8Nlxce\nC4ET\r\n=ORaP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCM9TsuOMIkhUpJStY0vsJnHfjDJ7IQJBAOy92uVqGzTAIfBrsEGj3rMhzJj3auC6kDMffwIKIvTJ8tRjS5+BsM3g=="}]},"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-radio_0.20.0-canary.5bd58844.0_1602632790285_0.9220362724695583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.bc846b29.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-ripple":"0.20.0-canary.bc846b29.0","@material/radio":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QZAu1WpIALBOW7l/MyNagjoNQtgPUF1DxiTi70KTwi5wLo2/dctVjpA2TOfco0XJOGxlvD3rBd+n1AlOvmopcw==","shasum":"cf9b633236b1fa47759a5cdca7671519f2a0384c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.bc846b29.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BiCRA9TVsSAnZWagAAL9EP/i4PKbjHZW3iceDTbmF/\nbrtPcN82Cu71R8DAaIf+EuUbMh8CRXcrmDOdaFs+v0IMN0oR6A92IN9oQinx\nxpjFLy8fm1+13zuPMQNI2BRer1EVeDrwNF8dOXDj2F30g/pEdvWZb/9MCjR9\nV8ZS/FLgyu7qV0VoJcGf2hXfGaIJn8+Gkkd3+FDUbygci3YMvcKxoCow6dED\nKeFKbQy1poSn0QeEnX8b2TwxRlNWW4mARVGE4l445ZlC1GlhkWJvBenSI86Z\nuEPSm5xySpqsHYh1POiEntW+5nQUVTa5IL9F+8BY9gnsBsSL5xudcSa4lJ06\nnGaQ9TJJKGuRUyhzeFMME0gOUMDSAGhlF+FgBL5xEqDbrggCNMgX1ZkDDyLP\nI+bn7E/4EqSyA+scrifyg49ImKr/xhT0kxGkkeGzgLUvI8Z2loo6oMIYbm2o\nZ0KtzDmvwxw+RkB6gbMtan4b1cLq3y47y5ZnZEv8HDpiZHHKHyTBdGXz9W5f\nTcFpT2urHGDdrP4jJ18Og/xhb/ndbfmEL9EaU1n/T5j4mne49dCal652XXJd\nMX5WKxAXIHxub8LSU/8s0nvjpYypiWCgpXV0Ez+Rb2P+v49M1sOTTqrFQgq2\nPDm/df+JmczQXLnbl7OqZDkzK10MLiJ3zIi2jgBZGfJZ0ICLf9z31Iv8tORB\nab0Z\r\n=apmU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVygM/WrBLqriRec6TNS7zEO2Y722IzsL/nAAIlzGqJAiA8MyI098DHI55WgZQxWNq2gcjV85SxUgX7qpne2qpp9A=="}]},"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-radio_0.20.0-canary.bc846b29.0_1602699362150_0.6136835084238925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.3280b686.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-ripple":"0.20.0-canary.3280b686.0","@material/radio":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6MSrZLi8OjoG3HL+fG9NldPw7qXlxVSsbOgrELLf2yQ1smIo8RM24EKWMBuM9t3T7OpWL1qX48D+KLtPMd/KUw==","shasum":"568a853e6161cb285eb489db6dc10e58a2af8f5b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.3280b686.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOYCRA9TVsSAnZWagAAdQ8P/0ZcUbrY5BRIR/zXwjod\ny50KTX1h03ByhOIdb1FWjY6AVekGeRY6MDZhCSBavbuXeJuCVYmh0Tg0EJCt\nEhJ3Syxt8vr6pS+GjWhahUF/TT5+0cXhwneHvdW/tWX5qA184WzcHCnLJMRx\ndVHsNRllrzAULuqlhnX+/1wr+ZXH1xKap6akHzQJgW9DbF2JKhbTQU5igElI\n6DTQIqCtr0ko5k5VrLOwI6G3fijxYlVlhcpWNAF6pzvIsdYOFkezLXtp3z0w\nmPVTf2S+h5/PjqFbiE2MymycNsfrtygwO/59y90f+huobqq5bD20g+s1sXBt\nwu/W5DswKJUwPUQyijDifwIyAdZvTIepvYTNkRbGoOMgDgFP/Qi8eHDwiEOH\nwp5GaeLMs3JnoYPhjiDnsEQSDjr/mCPoiS+xFJGSOegx29AxzAuqDwFjm234\nSJgc/n+td5IT3GcCnUmVkrnfwRbvuvY0o8NRjlsK28e8GnMlLGPQuk5aJiON\n9Q0ys0BPyrnP+vPwBP5H0cy42iN2tDCmF5g85reyfaYglPwH4s6uK7azU7SE\nq9PBQ4r80dvePxdqU6ynsoSclUpe3D8tvmjRCFiB75dtIKqLr9YeTIlvPZAK\n8LRfbH0P8W/Uv0OMB+I/wGizxsoByrwcjwTcLJAUzJK5xxiSfEwECtCNwCkn\nQ6zp\r\n=+E3q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEJGSxKTfidMXR46lmxfzQ/rvrPxzeWwfPH0n/DaMfhgIgE5TtPZy9+eXHs/hLoY9xSKXvwkoCCU61HqVZHG348NQ="}]},"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-radio_0.20.0-canary.3280b686.0_1602806680389_0.839179556205397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.9e94cd38.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-ripple":"0.20.0-canary.9e94cd38.0","@material/radio":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.c71ebfa02.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-93ZqACnwvUepksJUngV6g1CGlBZTGCICODuvb4sr/hztAc3SmH+ZT58cT1hFFHwdHshAcRg1RDGQHmk8Af2pnw==","shasum":"5fae14d41bb0820670675164f249dade8b1fe51b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.9e94cd38.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0+CRA9TVsSAnZWagAAAegP/3GZCc7ChwJYGHxZA2kz\n0KHrFrZibmuCwdzL4wiXC3lIYAE27/Hjs5igzEt1naltiUQFCtEgirqgHl8W\n6OKMu3uKnILeZM9DrCuklXoMsoCkWLpMAAvgFCh5+rvA+ZnXUjm2g3zVyQJ+\n91N712CGt3nn2Y65DABx1fM2Xj5pItjb7H9m3GJp8U4hudVeXPYZTRdSHCp8\no4oCod97SAnW2ZXvIizytKYrI4NBbu2Np50FJN3xgN62UDiCtz9aTE09Z6JR\nzfb/XCIJCyQASfeKXrkLIqFMtORXu9jM/AY+nsu4VdpDlSl4/ToAF6vbJBW0\nEQqPZMHp96Sd3K5GSWn1ELQ5uapIKXHENvfeQstHyS22gdnCynSm2HGo1YUw\nmzU4RlJJ1ObCXA03edykP3LeaUjV2sYMebxoUXjINYP7z0yAD3Z3FmTeX03j\nbfFYgU9aoJB+x3TL30L7CkxmndPmDXtjqV/Sh9w1ns2r8o6mBYSMykOKQZQ4\n3QSDsS2/C7KKmEdsOKjM4RYVhoVtOimkCtIwPj4KLunyhtY1r5Sezmo8nPXr\n+SkLiO7fNmJNbF7h6TZTApVbUnhwBsDTjdZRGpxmzWB63ORQmc69a8glW3F2\nxxRZb+vD3HZ78tvfPVTcN1nHrJxNtooUHA+zlv4tLhD0g3Y83hErGVXfggqr\nOQP2\r\n=fLQr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRRS5hSl7rfjcyyYw/bgca2fvkPkeIKaEPloMQ9N2ICQIhAN/g/85mr/fs2I1rq0kkmyHkIQm+Zra4zlGRglTDs6U4"}]},"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-radio_0.20.0-canary.9e94cd38.0_1602882878092_0.47810657574729065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.4773c773.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-ripple":"0.20.0-canary.4773c773.0","@material/radio":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.2ab716cbd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-A89VDpfQmhaFrZo4h/+5bH7oPjyI9hivU7Th52NxTLdR0+1VVz4Nmc0diOIEgf6Kag56+q4AXnAsmMm/20YZcA==","shasum":"21f8d4b0fce910c0bdb5fc185c8ddac825d1f523","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.4773c773.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/xCRA9TVsSAnZWagAAThcQAIyHhdOick0G3UbDb/E8\nBa/G+QYXTOJU3l31qyMQLtd+NqXP7UccoCMVVNrYBQjQYQDuslQRuRL/WYB1\nG5cornwgXX66PDzbjIViI/DEhFkMqZ9FzElPdqo2tYVAyABslcTsvTFjTeoJ\nqfjUdNNi8aKMDpsZIpGDhaL5qKLi9AmisTxWbRHZT+lPMfXIuU/gCzGqvvAt\nKTq36m1gkztHK7e67jen5ykuCo8F5tySStcWk+OqOlxvoF+k1BPNKsETZVcF\nshW7cOzOaPN7bFM5bQxOHkiqBYeBk3wKVjMFbEjr/uHian9169Pr+VT8qEhJ\n/UajMMG02Osdq2DchLv2nTY1II85XXyHuw9J+EsP+q7a3d8OuJztlBn9Jy59\nG8lSITeohbYxwijRjDSCLBxpKpt7T7+xIPAAdsKsQnMYaTDYvE3PkOCvOb41\naRtaddNM0Gc2h819GS7WMlQ4RXDNrt/cbLLjxYm/ks4TJZqo5S68tRZtL9xK\n7u1W4fSHnMF8oMwrIWAkOEvAraxHizBfAsRApXIGNgwoEuC8GODAu2QB+8E8\ne4LtHG/0vBsLF/eoCGbqME44LsVCTSPvlRHPKiyVuQDGWLU8YIzsyrbJTyfe\nJR4DPLUktk3iJC6mz2KblhtkG1kb0lU1mfKvP59cbVILv9WAgLCA8pTj/Jr+\n1qrZ\r\n=Su6v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAp6xMivDm6mruNjISjYTGscQUvvRoyhpksVnbDpB+6LAiEAx7T8Wdf8OtYFgV3Bn7dOSgIG7XHBPbTL2RlfLzRUgcc="}]},"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-radio_0.20.0-canary.4773c773.0_1602887664401_0.7862534079904593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.65787913.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-ripple":"0.20.0-canary.65787913.0","@material/radio":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UsViIo90Qk0KYQp/1rGzDnf6xsShieLA6PehmBH+rVLzfJyqKHFNsBS6tA2dDxqY5pbrYZXZGW06JVBgeDoBeA==","shasum":"dec7104930297c045680113580b2dceb13208cda","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.65787913.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAiCRA9TVsSAnZWagAARREQAJlSmQrd9HpWhobiI+2M\nSI9oGNWYQ5VsPks6XWI7deCJhcNIVTub8K1km+I70PYAhuq5NrBIKK9opEm3\nvMJ03sfjNAiBaV/RU1qTL8lPXTq2qcfROEW4Uiti605jALHTEEA91MdpH3J8\nO3M3eon/VMDO/ckknaRIdu3DUQdZWhJwtvAbsq5Gv7qfjkg3bEjZVsV4UOYz\nPL3wWQKox6a0bxFOAcXu1KP9DffqIG1PGDGnjlC9H9Djl9o4uoCCG6jqgrIH\nw7q2irR2PC850K5RftKnbJ43Y7uzaSZJ/uPu43SH9EBUPdRRKwYAX0cAH6qq\nzmnnCFSI3BEFzqXfdhij9BQsu7e0lsT+yQ3QuIodJtfXCj/AO7qTrC7XII50\nC2T1LEB9TvYFdKBf/LHVBOC9Ld455XRi5labumhN6NxFAwVOvL2PjpYvQX3x\nJN40zY2tfsiaxhHzol2M1YAnOHha50rDA1z+MhSmpznM85L9tUvD8weUqs2E\nRYZZC9yxNJndOalkDaJRT+Acf1aBNN6iXROx/RzDHOUP466Kwq52gCe3oUtU\n2GvvTd59qDV9UjV3YQC2zU/hOC5CfFeDFeGOShXB58AYDcPoC9KkHNl9oFCr\nYmAFvSe7gKWgtCjzVuMw8K3DUnPs+18Kt3PMz+eTX67asgQZfs3ulKiHtvBf\nlkrG\r\n=WMNw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8ygSv2BZtytgYbjvNqu2bMGpl1XBWu9eckAU6NCc7bAiEA4PN8x8ncSJVfRjsGhX0fWex5eH+U6PBeWeTA7nh6SIY="}]},"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-radio_0.20.0-canary.65787913.0_1603133473514_0.9948360036436441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.5485fba3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-ripple":"0.20.0-canary.5485fba3.0","@material/radio":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QRkNz4kTJqqrlaJnRK9ApFBvsMFmr8YS5AC/GrTzwS32i31bqo5/jgKXqPUeOBMfZUnh6uFX2QUDRlmcT7K/lA==","shasum":"71860747ce0be5fcb93af0b28f7d61b87e00d222","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.5485fba3.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQICRA9TVsSAnZWagAA+4sP/2/+DulysE2k1HbBE6EX\nMoyZkT6+CKO9mnwgIavlaK/UNXXCo8t/JHZOUvuwzTncw/BSM5uzlXdiqdsE\n9YqNfaW12AEms/28H7VCfUbergZqVwgotv0M1Vp7MgXIpeHqgw8nmCWE6hCD\nRssDc32ALkWYNeC63+GQ6HG06EC9DsIFbkSj+4H69xbYgonuq0i0DfUTz6kB\nZHbej8AGZCIjt04wbA6ajYMNrThNK5vzH5OCpSfooWz8ptEbGOlCR3jrIfvv\nUdZwolZ8RYhT3OUptvuJ00c2HWoiF2pa9hpXGFvGpweDQXiZrQ7/DNwl1fKd\ngcLuzsMpPFUea2CjBb44XUueBnPxIHPhfMtB5jFbuRxYKa/HeZlYD1H4lbHv\ndto9BBGQuw8OSutRV4xsNleDPUr8KPpFyiqzun1HqMJ+4RERIC4T9zBWr2rT\n43kwjXesuZzbIrXEdADYZeumDvcA7TErUxoAkH3tIbJl1tq688ezlxCH63dN\numxnPOfaeiP67bjpT22mfM5MTHZwHDD79SyMQawf0qp7Yl0UikAO+9+BEsvw\nhH6KnRjfZQrCW524UFno/FTG/8ICDL94HPiXvFFUpn5jfffoHe8/qyEWB/po\n1bxP5F3Bctnwh+OZKIWSjLmVA7OZFlSuM1vbkZR8zRC9lBb0z92/R2hl8gJZ\naHiL\r\n=H+oE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwHQ2VmdEeVFQ/6aCq2IjGYUJTx0d8sxPtw7tG7MFBoAiBlrbCCg0UJpIqC7oo9PN94IKxeajiCG25Mc11gjqYRFw=="}]},"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-radio_0.20.0-canary.5485fba3.0_1603142664483_0.6993468978255786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.a39d0a92.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-ripple":"0.20.0-canary.a39d0a92.0","@material/radio":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.43c1c5e2f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Fc89xePGQSOtiECwf3FM45OrzLKCb3/9bYhcLFeuh6U5biQHTmOaKm99DlHlWfDf+nQF30LpGv1+vQnsfJ4NdQ==","shasum":"66472156715c819fad680149b60fc4d466774e1a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.a39d0a92.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0nzCRA9TVsSAnZWagAAKIYQAJ78vT+aPN+YjjvILuXH\nfANGN/XCL4vEtTW3g7Yl8+nGRyVsfiwCQtCFGeUJ2kuklBjpGM1wTJYZ/I58\ntaifeiu0YjVpoPypVk0NwF06mc/Q4wXkXOMlJJq2I4zN9XwB7N6eZHRrfIgs\npug0tDN9TBxilFgQsuPXAtgJv2Aa8RFGJWqXwQrrvoXQiGMG+zAazZvb2qId\nrjbaR9CDBjD+VqilPyuH7DPn3TVDRLs1fu1ufvW6qHrndX9cDArJiG6J9kw8\nOsKKzehq+Lt0SsdBjRfSe/uap7k2ej3YCVGjTSZTAHShJJmc8NTeBQ8eYV/0\n3dAevh1Q6hOGWsvfW0+eS68d/8fI+zD18FRjrc1P6FIHQTU3ssJTgb4wOC59\nQFwoWo+dXwUK0zVyWzbJl0B1G3PIsUTBwK5xKhHAfVrtLGWx2z9dNADaXfvy\nKjbi/tr4RBzpB0a/aXyrBqtmmqnHQ0Te35EhyeR2b69V6SJ358ukb7Mk7d/B\nO3bM8qBBnJXnIdLnLtzebeTKVnHdNkjWJ3Haqt1/iPnB5kiwWjF2Q9Z0dTyv\nuXrP7oGNWXfq1qr5VdEh0lfHfg+eV6KHmkp0PmIkaTi7VFf0afxv/kjeWJQy\n/G0jwpdnFQezKs+h6M7LkYHwnqNb36x2mUt6UJrY1M1S1bywafT0ak11koLW\nh0fH\r\n=iTDO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUDTbOH4AGq3fkoQbKD9mG+K0m5G6u7hnn4BTY5Aj7qAiBuAb4V+3A/kta2kC3imFJJBSRF6vATxXZcifR6lEwEcA=="}]},"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-radio_0.20.0-canary.a39d0a92.0_1603488243229_0.8014401445635984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-ripple":"0.20.0-canary.4eafcbc1.0","@material/radio":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.ccc64eea3.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+ec4NMLUhKS76gUYN6JuBA0VQEnvDjIyy9iJ/Jvzy16uV26h36X1OVbpjei5sxuOn0jo/GsROB1bpRA0Bcux9w==","shasum":"2a42e418eac8b7026c67cde4a65eb13ce01addf3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.4eafcbc1.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YJCRA9TVsSAnZWagAAodAP/3BVjtB/OzfvFE6x2MEm\ns9ULEsB64PPHpz0oOS1vzqaOjX7+ngKvya/v+8X/fH8hv1skGX4IHO0u5iqO\nILpLCV022wtr+yVjijR7+XiIXwMGGD05wFhToVRHQfMrcn/6TazwRqAP5sH+\nLOAazQriW5FtF6/BWtH4cg498fTNMtRd4AwRL8lfM9eHZEdMw260GqVJ9Ivz\n0iJly4sGKhPawQqlQBECJ4wfv5Nfq1uxQwCc9qrsiqxaWB7B/HtCZGHohOsb\nJ6xn54c+aMxWjlLsYJ4WSqliEtgdoCzbjcCYSZZS+bR+WWXOoORdJ2vnMnq5\n+f9POc7Mj5BjbXZWNX/nIOBuMyWP5pj4pkzjgMiWGRbeR5maPndbkF/oIU26\nKK4ge4IuBTIQRdNnF7zPRJuw7cR/wo8/cJrdC4bIGrsiTQN8qJXuo2g7JeWG\ngwcYCjjcdIzL6eKYxJKC/9gkjmVF6sMzoiCAK5JFvfcs83sV4v5ohqZtIChq\nndqtmpZqY5ICytcLoM01JVWdq4dRDI7iJK2x3lXdclan8HDUaiPSw+R/IBx6\n+wEfQ0PiLklELpYdA4ABDQltHTWcHmLP/L4yHJ/SrPPCj5SDt3uap8hyjT5x\nbxv9HuSXZYs1iW8IwrtQR9sUZc/V7/IhE1FvlK0QGwHvQD8Ik/v9bKhwdX2m\nbWUI\r\n=65hL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDomhFQySAJ0Hh/i0iFHA1+4PD68xCn+cb087ES5u8xnwIhAPDwRJtiLqJNgq/Zn7SVdlqZLA0PnXsBHiLf2K39/v1W"}]},"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-radio_0.20.0-canary.4eafcbc1.0_1603761673370_0.8823090023725122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.32961593.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-ripple":"0.20.0-canary.32961593.0","@material/radio":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a79cdd019.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NBsb5UOM5fmsvQyN2tn5yEDHWqAKHa8H69VdrPe+3Gvimo8PtapHfWnphJDtPwJE4qW1FePb3FwN09NnvCHGtw==","shasum":"d95b912c65b6f469d254637f31f17bac2e2cdbaf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.32961593.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL26CRA9TVsSAnZWagAAdAsP/12S/dYbmWjEodCIK+yc\n0gQofa6k9I2Kb+ORlgO6L2DoST4LfaNdt1po2PUQ7rkeI+PSS0Cs/WJJTWOH\n+cUX5kOc75JOtQFkhDE4giP4OaxfXyqerk8Uq0wqHJtMTwKxrue5wu48fWdy\nZGv1/f+kKI+i9ymLhsESUHBPScbBvExtu3EWD1w+4kLu2cgdCn509BIwKGUB\n/ZS0D/z83vV39qFPpNtVZaiiUM8msLWLJmZvEswHRfHXj9+1x6wNHDu44tD+\nLJR8FrxCeJZCnRIojKkKicX8+mWfbelwgQgU2rr4FtdA73bKGr6OTkaAUsyw\ntEqn1UDsn4fMd6QuInaqiuMRyKzMZi/dyq4hxF59qiET7wCGP7flxgCdA616\nbhmXK0cuKTunP17KqErvB9mz7PRxVV1NrXezah/WsU0wDruPfalBzesvbHPo\neIozCE1bBv+NQjEnKL/tD9Ys8HOQLUdKbmi91aSpxGmZlsOIyFlLNeSZMC/C\ndH08SdQQ6YVuhOAV4ZFtM0DG7ByFvrPe029SUwkHLRtOj63M09MnTv/5aNZz\nR3ea6MGM+2MaRGf51tgeaSu9UGhx9tr3q4OszXx8rnZceZ7hho9dCMS8VIbK\nrJm0j5ZV7mct56UVwcqELuu3EkDbmoGEE4piRiwwpGrzny+w2GT5LeP9F0My\nZkji\r\n=G6Ry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5lgWf+NnIQxspHlGESPEy5/HyRaMUsfCU45jvjwyzlAiEAuPScph1Ru6vE+XxPyFBZLKABef3DYhD2RN3qhyxIMxA="}]},"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-radio_0.20.0-canary.32961593.0_1603845561972_0.02806903531421523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.8e3a0601.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-ripple":"0.20.0-canary.8e3a0601.0","@material/radio":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.a79cdd019.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AbBiGijLBG/gWwINfprPWFd2YcxFb/WVjdEz3Qp19pu2v+eUCioIkDIttp0ChyMnAjmsACIm0VbZyUsW0eyWqg==","shasum":"e5dd1825267d4fb34bd7c015c2f64053b5ede2e3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.8e3a0601.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYGCRA9TVsSAnZWagAADPQP/jj8fm+iF13SJqJ2aDRn\nevjkiyZe0erQD0jNnTLGl5Wc6kg6MKlwHZMKewbB8XQ2GFELSztXyaxWxlUj\n7BTnbvdT/5mC8z04pNtv7IZ8HMjBOGz1quc91L0usJv17sbMKRpjGlvYtxJ2\nK2qbLIlxuMCvRlhUYRBhUpt3ux9buMVe5IEhtONkf7uM7vJO7Qkin7xbGxrM\nI8CK61Kw8HfRPu2ctkBq4JlsjGLlmtrQgXTg+howRwUjdJnkV05es8LhjQFd\nhObwEeYZyHgIzUbNRbCRUjf0xQHklYxulNXNh2mdlABJOhyed390qqzB5goG\nPUKqXaDiiM7PtdlaYUzJ4TJL4Zy/5gUXQUxlAKUWcIM9nxVuAeoMjAlggtcx\nNlQ/IjmnXFUa8fCbO9D6dQBwpX2IY3J7FeKfBfhfkOGTbRpylT8VUmhYW2ma\ndP8/+X9sjHNATkcdqCz9zcbdMbEuW7yrAp7333xcwXSfCJ8s5Xib+igw3Wzy\naI/vLpYQWTlQyWsV+wNYuOrD5oEakUWLIoTDNcUjvAdLOC65T9g4geqPlagi\nB3nbluTkl0xRdFc1W0YTYmdRBD/gkx4qbJbBxbWGQ9GHvO5m8Zz9DAIGR+Xj\nB//trakWfzCdmNsqxd0VcR2WHqpCzcKAmXB798A/Jm4ARx0jvhSf2IfVkSei\nnWhj\r\n=+6hV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8z7AXjejgVo8Pxt2gY1/1Xz5nnGpZtT1KtjBmGAyEKAiAhu2vrklvBppPWJJtZrbbDnmIrieLUUkHlDBSdUleHdQ=="}]},"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-radio_0.20.0-canary.8e3a0601.0_1604007430449_0.41483032930369457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.178c25b4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-ripple":"0.20.0-canary.178c25b4.0","@material/radio":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6d9648ab2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-b4jlMbrcdaXgnek3p02SUCaH5Z2ELSZUkqrdNDeV+7eDj9RY778ikjEWSq/VGGp8vFKOvFo8jrSXrOFDp6ljUQ==","shasum":"310455231bd32223ea97bdf10b3bf914cc991130","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.178c25b4.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzk5CRA9TVsSAnZWagAA43AQAIIuoC/mLg2M/ndSLqRn\ntykpsQg9a9FQaiF50VGRTlrfMGpiryMyt4jGXdj2cmfP0NZzlklYDk5L6AtN\nDa4A/TgPA9O218061nfNOXnbw9Gyij58yAwOZYTcl5cdS79YSc7SFHxifg0G\nSJ8FwvUugK03o5u9E6leoBO7Bp6vOXvY0tAsvvqJF1abLe6FnWUUn/3haTDc\ngOpFc4UinVSfUNhGriiTSQMnR2jRKF5EexE0bacBclgLyeXJvME+Bh+uCGeF\nZ9jW4nbJ1d4LPy4JFWk69z0VDqukJoKc10xILC9KUjxXFYgTYvZWzntI7n1I\nhAt/is+KbOY3DkoePEsJ3rEBIs3wH82TpE3UbSbH0SK4IDler//Ok55dzsBz\n9vLQkTRfsP2kvXhNHoofVaCHFPusktiyISToGp9TFVAbxSsUcxBvoWwKrlND\nzJ0i0/auVttT6JC0N0QpWAYDk2CvwrZ+1CPsfgyzhl5lvaR8eaCOVEyYmyCf\nx7vvNnxfXIzzLwFmCC8q5xVKn33UMacG02DsW6Hk/pqB6iew/weD6rJEGrGW\nCkJPWadmka+ruKWO8sOHNLGa75TaZhrwABgGg81f5r9qxGYOCbEyHZWMz8fX\nQ5W68UkV7jP8MplVNTvZV6zXuQEcetZfqHyU+oWJiwovMmLZEWYSyURb1MFL\nOiUa\r\n=LlDS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICxsSyAAnP7pKXM1EJZpX/Uav+SYN8IxWDIKYWprSYKOAiEAqRbKOUcShYlJFNpjABaI4NTM1Tix8r/qg2CM51HMoHE="}]},"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-radio_0.20.0-canary.178c25b4.0_1604008249177_0.6931129088870795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.124beb49.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-ripple":"0.20.0-canary.124beb49.0","@material/radio":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=8.0.0-canary.6d9648ab2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-G9K1sy5Wnvil67DLoWV3y17tnvhcyfRFBxsz7ZmBCT0IM4ZBQIAHMOY/t3mhEtxIS2CrfeXVriM6h5QrMsXEpA==","shasum":"0da612f619d0a19a4a5950f3cfa0b413e4e5d59d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.124beb49.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqYCRA9TVsSAnZWagAAzhsQAJbT5NiDAtMWDf//+TzE\nPo3+kD8y0RkmXI6fJRppSFJ9DYzSNPQqcukXq/Cknnmt0lbogiGZ11fKxztn\nkCDNwg1/Ag/mKXzSUrdLPJ1xvhTVPhhOKkWOXUt5Vwvv+fZ4/NUC6AVTr/AP\nVQPZqbncqJHgc2cQ7eCIHKe+LThN3mHDNHuvamMpB1kPuhKjv9+1Ft2zz2jP\n3Wxck5zQbp6gc7VDwh6w5YNIzSEXNBNh9GYKxbtRxTxCDY4SoIjSg5E4mSvW\nbxgQkgUmuIDDYcMVIMREqfwGAINubTIm05q6zTTEcxvGf3NcwvU6/4KQnPc4\nSuuPrmVdSgDfBdDXTA7ARtB06L1fe2yNglD5B/CH1xg30cNL2dzHAxGEtXuw\nBGNej3KjFzEwvLSeqmKzAMHaKM+LAK0tjk10vyW2Tor0A2yL31EPafFCkHDY\nPoHZiPYZNzbUse1pjtmb15PSunHjpMBtxk6zitfSRXzs1uSPxU/1vqXEP7n6\noL/saI8CAb57jJEr8Lo5kiN9K3Yp9otFF37HVFmdMXlxZEKGcFkspvuVsJk8\nf9M8U5PVnhVfPCASW12IfvlLHNC1svkAmY50TJoRstTphFEo1SFdAumLhG14\nPzbKbf4e233xF44uy/RMB22Ml/IGdeedJI4e2SwN7EgWF5+TP7lVfb6h94xM\nbtb+\r\n=Isbl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMMgQmM9BLuCArnPN0fG9ka8OnvkqKsOQV4ocTg2oCIAIgZA62WFdk7PNRIA+vkpXhJ36K1eJxJ1nX/sl/g67KiUY="}]},"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-radio_0.20.0-canary.124beb49.0_1604102807808_0.8876550893411375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.5937f468.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-ripple":"0.20.0-canary.5937f468.0","@material/radio":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.d6b5cd418.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-S6ZL9XNxHXBda/VBOTvnlXpL0IyaAkPvt62YvEdccHHli6Gb03e0HBrJZaC1IM0KnsPrjQ6Df/wdtG/leaqMxw==","shasum":"133310b9e0b3175e70b0329218bef5c8cc8d68c1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.5937f468.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxe9CRA9TVsSAnZWagAApe8P/10ZejUtFOLiZRyvDYeV\nAjoZdSazjYlNr1/IbjDKZNpq6aerFH2xmwPJmv+F1jfetNb0QIWNGPznVOul\nZgFZHZ+QuTKxe4h99Uq8FIY2BQGMLzST/xdfc6QoXzHkPySi66Vt/Q4gVl7l\n1VoPOOvrCKEPGI+BMIZdmFj97Wz/H5oa/2GmLunpYPdRfy8JTR5u56vQw8hE\nfNNiusKrVXnSJCeVtPXMsdBiNtBPAsl7YdcimwQWO5iGsp+BIHkeVDJyhtdx\nS6WDXJRv9vSiJ5MqOrErpJdjqCNxx7v9gIrcG53WzktyJzpk5vyYaaetbUcT\nb/Oa/0vghrqbPUUVeFpaNZrQSQM0NaYZQSwIbaMgootYvQY+N2WpO4zGzohC\naGVZkExt+mDh6MRr3II0Q4sISvAMHSbXt0bps2ImXkqkhXdzmtCszVU9Zn0s\n+iRke9F0hh3zs17BpifGQttQmtd8gbJvttkXir/7DwhG380TDFZsR0wW34wx\nxnPDHc5pSoQaXgz6F1qOYyj40G/3wSceen9ucbZ32Pa5uiBkxhnOSe+r5yYN\noGyu3vEOSQ7typ3Z1OU9MrgWndniwTgyQDIesdmgO2DdcIoCZX83pDQyNYSH\nlGwBuz3aytsFXXlbeCpK89D2KTPI71QkPpu37y/NotvaZMGVR/F1DC3OWvF/\nbtnI\r\n=IGy3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvCK+LMgnTEzI6BPsjjDH4h8Fh648opvIXRug5yza+wAiEAinPjfB1/IBestSywJ0lwSz+MSpZU6HU6mVDdrwWvoPQ="}]},"_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-radio_0.20.0-canary.5937f468.0_1604523965234_0.7507171947678182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.a9bafaee.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-ripple":"0.20.0-canary.a9bafaee.0","@material/radio":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.d6b5cd418.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oA1HNUJciO45u9GVzKzHCw+jBPb/K7PFoPBK4pv5gWdbngQlQUTIlmnVLhVHXiR8/wa8VG9kjnj3yCbrE14eFw==","shasum":"a95efc29bba12be3ae83e3a34db0ba5b91d6c7c3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.a9bafaee.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0kCRA9TVsSAnZWagAA8hsP/i3dIvf07fVOihbauwC0\ndQGw5EN/hbykQvK8h96+EMXXv1hy6ERilL26tVRxUw5HLjLxo/CZMC6Fl4OW\nhmQYJOUfBAtfRcU+I7hL1xz6D+h/9+mHiWTxfOlIcyPV3WjoxpeEB/0CoTj9\n25agBz0KiwqrOVUEsMypXeeMCB8idP+kjyIqpoh+zdVYHb/804H8CBenDzYI\nyuwojKWWOcsZfifusR4DKvbB/Hdtj0cNf6w4uNRAuaBJ3osQOTcW9UufUFfY\nq2uj0SVLY2R9Hr746xByBhMPPaCp9otP8WLAa7XS9uLrN4AYuH385NpUjVAZ\nwXnD/qDEe0Rqn9EjizhINzqZKA1ofsjpz8C8uNlbVMbBnxkTwVqLXYofNW7z\nHXCd/4HO11ZN6EQ+KS50a2P8tTByVr/qLBmpGK1IbE+Ek9RQebgdwGBUVu1o\n3rKW+kkrUXnmwfJgZMBf7Z4KICTJVQKVT6QZkxVf++8QDyviPYF1jjxDepgy\nwly5c9xeLmpuvyYiwWyrshmQhrkWTp2yB6Y2Vt3mp3qLAb7/FrOEogaFPaun\nnk3nDX2rRrwBbbWrXQeJGqsb00AAbAqJTg6JVClnj75uvssDOSKvvevaqlLP\n833kSQ3p0h5b0hk8QKAcpEZELGDPtDiyvmIgeqmLjDOgYU5C7F1BCh5BKpbn\nH7Ri\r\n=3AuY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbOtrhtXVntwjT7IfaKWr6H7Jds3ipw2aK7/SVXNkXjgIhANujpE9xXaR0jB1Ojas13sxXeQmb8v/nWUex7CSDvprv"}]},"_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-radio_0.20.0-canary.a9bafaee.0_1604615459729_0.3260033863631506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.184861ee.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-ripple":"0.20.0-canary.184861ee.0","@material/radio":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rKcAr7ppDiuCF0sUf/ToTLm6vF+HrH3ocl2Nx/B8ML5s2Ko0sLGhvpFpT4PBaO7X1u145hKOHW8s3PQvJKVRiA==","shasum":"e3ae482fc3b3d1a94fc3a09191a60a4fb4845fa7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.184861ee.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexjCRA9TVsSAnZWagAAFRQQAIiRIOLnCHwYazbFMVdY\nICuADygRPp84yAnhjoFmDm84IRCVAkb+gjLy6/wG4okRxIGU48rBTxum+92S\nMqEJ10PSbdCpHhh7oByTM4DHqysAMb87mjIzWTgnPolnBaaoqcUaNS4x18nB\nTAUlPir3P2PHv0KulylcDc2D0K0Vskybc6VZJ79ygmakIvuIfHdQ3EspqDA1\npKrJzBWM15YEJJhUZ+gAUTdzrK3jJptcQ+7udHkiLJhlVukSSG3IBTBeD09s\nNaPjem58Q8YDMgiz2rTVITBOeaJLro3Y2mEOEUkk1ZaT6Ik7kuMGvSf8tHI+\n/Ub3YGv5UkBV0XreX0KqFe/kzS4kz7xU9TzpLJ+G0bHqSRYnLC/oV2fh4tgz\nrkOrkmhW2joeWmNd4qxKaguHJkCyXqgENEbZu+Zmgo9vv/zY9vFB0qMeMdEF\n/jSWjrEKZQq9B1IsVUSmWyeTpfmmmGDIeVZnYYqQtGpJcaEU80k0a/esc8Pv\n2+D1uZdYrSqQYfOxTqW66iwWuuIV4AFRgg+bocIttCs8E+X9qw6TdJCCrua0\nlbpNiBaM12KKyw+99k2V2EwpwMApu/rMLg+1ZqnRVUNixHnm9pMjHXz5b2MV\n75BMHiHuFVMQ9m6aBsfq7HiU1lhXGNBX8cWhGIDtDZc3AUJ4nqFwy01vDEU5\nIo61\r\n=6QLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIx3fqGr6FhSPx5TozNn/VXm+sXA676Egiavd7PL7KDgIhAP3Aq8TXijL6DKpbV3e4dhkKaOgtj9LcJdo74a7XtGWT"}]},"_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-radio_0.20.0-canary.184861ee.0_1604709474947_0.6759648935127924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-ripple":"0.20.0-canary.6c6ae2d6.0","@material/radio":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-s8QT6OeBCe3rRQXOwNp5/8c+RV062EZ3Fw+hOws1qkdL3nU6dcvpeszVEOmbAilX7tQc0O0uDvK8/9dk8Vc+Jw==","shasum":"adc206209c5b56c524eaebb14023ed1e076841e0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT69CRA9TVsSAnZWagAAd04QAImG1K91PYxaGanjugOq\n/VrQCFzyacnJvk7iluujX2Fmp4o8JmsLV2Azf2BMRM+mnsjr+5fircwOmHne\n08im/BFHguTM42i9l77j2awQyfSohdjgFbWyYBaIaLeuUD19Ams3lUqFEK4C\njey4VKpmB84pEbcJstrC9aH03oB4fFAIZArXFOSkHZgjkgTY+TVrlARj+yMG\nl571ZtJ0Mcip6sPRJZ2vLRGvVbUPs0liTj2V2SzxCzBfSM00YoTbeReYkUMl\nK7gwjlvBwm3KQOeXWhDlNAr6wQkdXjCqQNpYaHts/BzpXnF/7mM619o20t80\nVrtYJOwtO0qGO5uAs1YrHTL1twoxGOHAPjnc0UpqUw3DsO8KPXAX/0y+0uAs\nedRhF6yuc+US9KvtI/GG5NiRhjR7tVkTrI2wFGFD9/YIpVHt6vvJtTZUg5eU\n06v7gfReluWdiXQ3zr3fJTJa55weC52FuneipAyBn+3MQTEW4SVssaLzWsJ9\nQVEFR7XmBtEPoVu/GsFKuYrRC18f2xqKZOjycAwhpvNDTeLmlfUm3Ky7T36v\nukUm4LYuuEDGmnYT+JjpWsIRbijoBC9SEcKRCTn6paa/K6Ayn+X7cyuvGnoN\nDBlUqs7pqz+D7gYRavrxviqbl4NcXkUe+aVKusG4aL/uRgT0Whk3JIjl9p2Y\nOQ/p\r\n=rHQ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAmNj37jh/F/g9zURW9FY+sJ9snx6EQlVHSPACexT2zwIgFVocdkPYU8I7PciO7CBtWgdLGooSIjUVOuIq9dYUgJ0="}]},"_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-radio_0.20.0-canary.6c6ae2d6.0_1604927165187_0.6355542280708422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.ea2aa477.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-ripple":"0.20.0-canary.ea2aa477.0","@material/radio":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WDYVc99zbf9bTOvXErzJjpSSFUPY8O6JLKcVtehzEIaoCxFoT+XTs/jgcU2VT90UEYlHlVmE+36qaS0XFjxgGw==","shasum":"a4073f9558639d79f29bda36e4deb49792eb66bb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.ea2aa477.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdeQCRA9TVsSAnZWagAAvjEP/29fBNU5CPUrcJZ1MJjL\noKsV0HWuHNwobl0dHU7TWRlkIl6A5gzz6firRmyHST9BZfcrHssR83vwapq3\nrTqqEmrTUf/kSke2A5CWxSLF/P568KzXH6z7iUiaXE7AwIJIusCl73pp45sZ\n/s4dGfE0Hd5mC1Ys9CmiCIKAchbLbSuxOnzz5mFcYA+AuV26f8izCaeV+N1p\nOEke5uNZ7Svy3vITdkQAdtIWyuDDnGEu+DVqp5LG1WSG45w1AD1N7dFtVVew\nnR21YibAAhSK5uY/D921IfFECCd4ueMx0Fgz0j7Kc7bhjrzQeUqJ1+6xDNjw\nJfE/8Nbmt4E60JTiE80Defvxcyv+aGNTL1vmMDPnLzWq51y1SA8qX6NHik7B\nGIHWZvtmWQN4W6mVzFgFVcEnHSEyT/bBCx9g9cVjnHrfDEa7TUHQuNyvOZcO\novVgYgHtFD5YHL9JvyELhGdSz8NbJMakTUzLs2gVxCAiKVyfru+QsGAFDeOp\nFONlIBnY1i5zsdJlolghCA1MxOptMOnr+/FZaGcqy596k0hPBRxyY0nHxqEM\nIsGQPcozwATlx5Pl7d0Np3YYU3XZ8qROfyRy71H04Q+g4ZSxsiBo27g28lkv\nodY2O4DBIH07ZEcNtoeOv7BkoVUpJlT1Y0y8Kto4MpDAA9jkiLDvmqJUZpkS\ndLzR\r\n=iodq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8RR+ppWGnv8s5KR5alc9eLMON6PnKkf1GtoKlDxxfaAiBaQmfuwpn6wPmLlKuWu7csXCgm7dHVx9xTm1Xn1AXo4Q=="}]},"_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-radio_0.20.0-canary.ea2aa477.0_1604966288172_0.4451073719038674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.a2c088dc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-ripple":"0.20.0-canary.a2c088dc.0","@material/radio":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fGa6F1taUIqKj6EWmwMUFoYY14XtYhv0wDfyQl58zWy/enT7uKvrLXggooOjT01Qvz/otOwetzeTD4Ob962Zog==","shasum":"ce89c08336365538f25c253e4a107ac3692088b0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.a2c088dc.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKSCRA9TVsSAnZWagAAFOkP/0NCQFwRXOU3+G5bT8jF\ndTwcVn/N4/Msw9HSZ1YbAqbao7+qZzYwMHqBdJEeiYddHbRhweNbupDSWl2o\nh4GCVBsD1Hvs1qFac8e4DjNXOFq0euWqWbaH0rAIKh4TCb5AAYS59BWnYiRD\nNuwu7JyHf+4nSvJV0PV2rkCnBAvSkNq4ME+PpfNKTdQp5S1ZCSxdRutsdGKn\ns5QfXIFmTRP6tL3sbh1iKZfUmdBCzLtol6M1su/5Wry08Ruk2fp40nsqkE+5\n5shgbZ0n370mD3irsai6EpRY+16kE5fJYCvpFiARSLcCwCsFuE7TqZ0Adik4\nXM4Dl3bJbimTGbFviy31R5gjKjoobWWUc2fTfJgxefoiclVWNrImdgz58dmW\nJlYpTxxMI0V2+b9OrkPA+4dmryUWJldSk/mgOfafxudXc1Ap4s9BZonMmTDg\n+l6HgWZaa/Z6y0nOCwH/RvkaP6VkAgNK4TJhltFXl1xxYUOUtNjp72tXZ1B5\nYs7TwuZRaXfo+b2uHyCURA54AkkWvA5hcL2bsfAFn0aoKCXGr5vL9M1FIPS4\nUH2YfysvnAuko8GfNBwfMrU2AVwlV4JQFaQIMWbV7lzSQ9jOn0WdX8C9Pvs0\nursx+WYGvNXP7bHK8Ost11bFPY6052WR0aayW4AVhns0CPT78MPlr2GrwVLW\nx6WG\r\n=bsyK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7ag+y0TtnVfYKHKKKrK1ph9t4Px4zDD5BDxcuJ3rUQwIgTCQI2C/mJ9a8iZYLpIk6OaErKZHUhyhGoLJDhCXDAkc="}]},"_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-radio_0.20.0-canary.a2c088dc.0_1605018258450_0.11632229526218296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.b04d71d4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-ripple":"0.20.0-canary.b04d71d4.0","@material/radio":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aN4d54zk/kLzXQ9J77NAbJwQ3x6w9Hg7i1jj5oZAXzikvStNg2D1AtVY8yOMuCk9z+cMpAydtdY/b4OeyGYubQ==","shasum":"7429fb47652d34a6c21aecf1cc0718920e3a1ad5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.b04d71d4.0.tgz","fileCount":18,"unpackedSize":99916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGFCRA9TVsSAnZWagAAh2IP/14qarzckHggqG9A30s0\nBRjOZeax2LUdox+XGOy1El0rRbj2lJNalMNFKl2D0gOXKX/i3kmsiLisJnwC\n3zdQk+42mrVTpGwBcvis3V5GPc+6B5rSxgAJT7bINlDy9fKjJpy3i7p7PUQa\nzMWZnLb2trRHt8SVtUQAYjYp/MgiAEIfWj8RISOGjYTaF9KUk4b8gf/cXR3R\n5eg/v1RzMXu2+Vzg6/8r9bgx0ItWvLGhyRZIZooIfE8KzNP1dXDTunStl1b6\nbwCluv/MzZlZbUjPleD68cPAB0/ZlleasfLCkypRGTnqzL3EL+nIojkZeo+R\nZRvdX2WipU+ocWpgjkmoPchYnoQWh/f00gvY5D4mByDoCkjU2jNuf+n0LMzh\njxrzcuacYN15iQ7C6K8ocBYtTpnD8HQFMZAUKTCS/myWVBOxGt3GtsFVkMlW\n4gu3p+Deyk9/9i9GuCy3aHfJoOdXrRXk7EWLueitFqpcmeK6zCzdKogfC1/Q\nL6gNTn3TEscMwy6AfgbkhG2KR9VNEQiEyhetwTC3cDTxwdKh24awYEHBpSE0\n/7l+1iOhrkGxEd6H2NC8oeAK6d9uuL20Q7bUAMWoRKvLJWra8v6slgFhbCPW\nD02PhjhcVrTOYtX8n0cXjukj3thd3FfJDFZqekp15TcHGX8FNfihsD0XGSDt\noMnt\r\n=Da80\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAu2yfCuGJ0X4ztVCWNXsfycjqD1BMwmQYmZzNqZCcpSAiEA9HPSHN4YRquDL+EdtxXYqKtsmtAZFTkiwGH7cgsww2k="}]},"_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-radio_0.20.0-canary.b04d71d4.0_1605177733172_0.751971487208954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.2c553352.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-ripple":"0.20.0-canary.2c553352.0","@material/radio":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.b39094d14.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MoaARZYdfZkPBsBmrHcDXlRjklEO4ts1Sfza60Cu6o9vPOlMiC7G/SPWdtePMMnzxLYFMyR8/hoq9E1pnMe/XQ==","shasum":"54153403cc67c89ca849aa936dfd1ce2abe69c71","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.2c553352.0.tgz","fileCount":18,"unpackedSize":99915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpwCRA9TVsSAnZWagAAGEwQAIAH6x8+Q/CVR7GC5kHA\nj+tCepoCx4sJJk1hwYM3YmVcUlKXCSwD3MI0DJqrE3HzJGkhwNQFuL+upAZA\nNKyOcQMWN+3hv4VRyYw8pQNFNrDLKCQAJEWz2Kt450hcFGNAe4XQIwTp15eT\nqNvcnVoTVFSEHwY7PMqexDg+5+mqjmfyhPHobubv92lpp3Odb8q7kTwf17H8\nEM3+z9D7zFOWUwDKk+67qQE9VJS6e6Q7e+Q6/KBANH1y04J3bICJUvpy3wMB\nnM14zIrukbgHHFkr4ZYoR+PHHwC3eo13RD7r4InTvDqF1uFuJ1zkMSQx/ZY+\novy1BVqM2rLnodOW+8wrfkLe052l4IYFfUmWGvSEvokjD0MN0bfIOwsg6tfm\nFMlDb6SHuRzcbfaLkTErt9zN88apZ+5nTn/CYUSrd6/9yF/2RtjZJMG64N4u\nVWXVzm2q1uJBkXQOHxrLfIgDxOyMWDMYyxAcQ+R4d69VXF7CTX308buBVutP\nRLyQuzs+Wf1oYzKtRIuNQMkS8WM39uD5YNli9jMbKK/nSy6Se/5hvjhCdc7K\nuI9u1s15qeHV25J7U1PbvN2Xtg+I9HF3Tx2FLbX1Rw5Ov9/ERlN+LEHUFQv/\nOmaOktG2Xi9Iz6OJ3cNNpcWhvwRhKFRZXtpZUpXdrK5MnhaE0HJz+b+CDz4E\nyvNT\r\n=wN9S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTR/KRsssnYvQapS8QCwRkqk7xnAgVSB9oood+XXrcJgIhALf9jqemetw1u5vJQm8tfh4UY2Z3UyioyHUuzeUdEv1e"}]},"_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-radio_0.20.0-canary.2c553352.0_1605220976164_0.29113096837406727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.6560d19a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-ripple":"0.20.0-canary.6560d19a.0","@material/radio":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6UvCJvssjNI6BFJjbcVFepRLJ38lYGUVVztT/MPZfZqm87Pk6q3aNfeA3RPCVnBg9OKthaji5qtZr6r9eYUeRg==","shasum":"55a3ca9fe0bf680cd7dd2d8dfc8568e86ff705c1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.6560d19a.0.tgz","fileCount":18,"unpackedSize":99915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvElCRA9TVsSAnZWagAAQ2sP/1ZCI80VbCb1IMkfAgXG\ncBYFRUQC0mWofbN9a+7YDoVjS7fhMnqU+MLy0WGDdQiLTPN1xnN5HskTMYxG\n3b+z75SUOlfAhNH6iSgCCh4OtcyA1Zr+3AlNEW2N2cmhqOcTZj26pS2GbX9Z\nqKnmbE9+Bs7jsV86vP5XYFQo0pyjiTsjNLzsXGZZB6HnaMTiYOiViSxOkXhv\n8RfKkCV/cNhf07UrofjZPee5M+1BabD3UPL9P1osBMby/D4X2hHKzv91CqEz\nVNcX+lwUhXkgk10VpnH/q9up9EfnxHjdX86Hs40Jl1Z6mK5dmOKQhMNfIH0i\n+DOO0hanTrYED0GNFxXIQK+MaZ+AS34mOPXZikgi7RyHAuTG3IMgsG7Qhb3X\nldEFB+OglZ6IHbBsqXEW8lafIcpIwk/8HSVlmc8uDHiarUZOnsbJoj+VqLqE\nm+4OO9TJV2/lqvmw7C1DlAW+ln20itaHrrmUoEOD6IZcmlWN26Kj6w7BuLYe\nTGg607hc/G35jFMU5+5ivX2YWndSbBtolZoKnxrOhpqDm0P76Sjkx8bAm7uY\nMZbK0nrWDrW2FSo5RPU3NZQLcOQfm3jdPzS6cmiu4u3RZsbwJa7bz/Ticrun\nu43RC6qGmFW4x8hgAF0dxJwdqSfbfEI+im534ALDEsTKJtNmrF1vYX6Auo98\nyNoa\r\n=lVv5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJRRuK24w4tZiErLGsVJkWvmVF5Pn6O76enrhIonzkTwIhAPyd3Fv74UJ5AoCrvxMXQqdqeiah0Vgzec7J4cpFRxFI"}]},"_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-radio_0.20.0-canary.6560d19a.0_1605300517442_0.6743186706214672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-ripple":"0.20.0-canary.a28d5ec3.0","@material/radio":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-M8kdZwTlCx3MxcPL0N3orZkUuvVgs8dK3ySd4kp3D8c+BP2SkACBQHB5U/C56Yp5jr3f/h+2QQSrqQ9c//Zbpg==","shasum":"e9a85549057c9992101f18cbdc6bb6ec2e8baadb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.a28d5ec3.0.tgz","fileCount":18,"unpackedSize":99915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+skCRA9TVsSAnZWagAA7V4P/3BzTQS23mGUIzJyclja\nRnvJTdL265FYL/n2B2QCDoVGfvC14kC9tklgthsB6ZyqA504AXae7w74Zwm6\nDJJQunn9MT57HR5/AUZ9ySO1reu1oEfHX7cGbvf/YiOQ84PK1bfNv64/rzfI\nJNT2R8coUkDEsauivOAaHHwSTiNord/nZ3C8z/09xvat/lrCEo43rjhM5yjK\nD4EBl+3aDyubEfxpd/HntoHQelPk1RXmJi1eSXUnFUg+s7GkXVtorDI5at7D\nCthwHTA4JN2vHq5O2t93UI/j4DJJmSS176sJC0RrOFbY7n45BYkMG9Rf6ug8\nqPXOMPvwVToqCtGbUHfnxICTJ5dgN1AoQTfAORNvDD9UPKIH7fiA7dJsCbu3\nRxJ9xjlsxbiv1JtKxA5WudHY+cy8ts5RHibb+Pw9f5TSeAO49M+Z1yZGAY+6\nm92Drzu52eIIJ/SawbNsReZOrnePtzl/B5+qa6cbhZqarD/WLVpSDF4gGntZ\n6jTq3MgzNqMuGgbTD8woMI2xnFMvdinnjj8bbrRjEmUGFzdUdqaXmlIoajNt\nk6D8q1uKDmX0oT9OWxuuG8q8+4UTCst/zhzZC4jWAMN+CQt8u/3gwixf/Nax\nyuUhg+okzbH1QLpOU1rd5WkLfdPXkisM4JrO6hbpfcwSdBSnxd11C86UE17f\n0o7E\r\n=7zTv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAajR+IeqPIUszfiFRXpE1/0aStTSZ0UfipbCiXdZ7GTAiEAgczGvayQ/CQK3Ex9N/9PUUdE2y1cIZQUZ9qS9+stV3s="}]},"_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-radio_0.20.0-canary.a28d5ec3.0_1605626660233_0.10143081958069966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.03e7e778.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-ripple":"0.20.0-canary.03e7e778.0","@material/radio":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.240c5f74f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-p0rS3A9A6V0dXt0HXDs+6fcnKJFpUlKjPPPI3VRvejwCTDUFf63ymvG2LC9q4fGHXeOIyenOAuEgq1PlfOyLug==","shasum":"954d4e9b82998e7e891511410f9bda6c18c448bd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.03e7e778.0.tgz","fileCount":18,"unpackedSize":99915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCPiCRA9TVsSAnZWagAAKTYP+wVVrqunFWnG+pXHOFFC\nmLMQUVsFZK1NUpbkVCPcp9PIc73oDuDigj6JVGvHt9CEzSesrmGZ8A/37ywb\n7/Sr0GowPKMVfj1oLSsrSOwV8dwU8CS+QXe8+HxezHo4cnlelEfs3BS5YZaF\nJkRryyLTna2D8knJrlqiCX/i51UHaw36bJCdqkF+RjMvwyQ1Q3fqNkzL+03q\nhUXvaV9qQNmfrJHvVbevORmyUY2TrNwQAnxN2oND3WYV2mHiqZDtapUd5xfg\n76vk5qqkHX6hnX8SgDSGlzVjaUu3nhXSPL/eWm9CwkObtKUvp4ik+9rWdceO\nHGTvh9dyY0sCoo7Ht3I5zHIzgQjdb+pBp82w7QOdbLfMTAnOvPZAMao1CdQB\nsQrjNzDRidwRLrLb7fB18l4O7Z07FsLnsbhnblpNk62O1+YEGcqUmOpf9D5J\n6A7ULetP9P3RIo5kfXbqNWkb20vs7OekdRhtbfOvkvaMVFWZ9Rb7M1sYfLzw\nzW3cdHqUd8/UKY92iKsMU7bSo5c1Irif0MzkfOuaKdMnAgNnZJQu5nrYngCI\n4Q2Ch18Be3bwJDdZnWtxYwBABb/pbkrpjA9YCYvkqET9ufjZsREaAdU+2Rde\nMQ8jYv1qsMrXqYKMcw3IG7/1gn/VJ/+8hubCuLoApdO+2F/lWAAYVy20HsAM\nB62Z\r\n=m7Mc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIccMiPqjpxdDcYp8STYGVEbKhSTUGm4WRbaHzZBVuSAiEAlaV3LGLjHK32bGWWZAnNMCkBkpmqEMGXllI5OfWEFVk="}]},"_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-radio_0.20.0-canary.03e7e778.0_1605641185919_0.3567943141828598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.ac8ed597.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-ripple":"0.20.0-canary.ac8ed597.0","@material/radio":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0tzTePCGKKhjCNCLmFf58KZfgO1SkVQikEJ/0kKHZNZwkDnCLKC/hFg3jlzZABSFvM92OKK0Mnuc3RbBlBBRDg==","shasum":"e4ecb866035843e676481ffb94915b75937a183d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.ac8ed597.0.tgz","fileCount":18,"unpackedSize":99915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEq0CRA9TVsSAnZWagAAmOcP/AoIGAoxa6ogUS8KGJwg\nwgusnqj+Fi9qsW3KSV5gLrWZPaf28v5N+pZyiSmv1WAxHuPuFNMjlhqhSlFW\nwOPHOPxFzP7J0bs3OWD2S1sYAfGPuZT6nsbG5oSLzA2r5SRinULvM0aPe6zb\n8TGLCkaAOnUGMKQ19roaDUCmASxBxIjdmFs2IgLtaEV36/+POODejagNVwAz\neJQn+rjQMEl0d+UEECgOTA7yR8H6KYdb40c2fhIONst9Mcd+OoNEv+J5mo+D\njf+C9sfYJzOgbokGifnBR7HPHJzNH4JMsHWKuAxJM6fwMnVpVCj+FUTHLs5b\nvm4B0fP6RHWi+6JgdhXvqwAd9vLbznzvDYCl2zI//W/jKMuuWxxOa9UT9DSz\nu97wSD6e3l6HtjZi2Wv5Ho0GrxwCwIbnvxC70pxQNx5LHOEWIb035GLyMB3t\nFG/M4oyx+NxtcENm7oC2+Ewc32srRX7hBMc19dQRnFJ61phsnLRHiK4w59iS\nKS882j9c98ZxMoBBGSmq4fm2sKfM+6FhTYk0iauHGO2BexV4fEOizoqhn97k\nSXCto19jE2NzEQc/osWBcVpWWAairbn1KW5brrqHVwB6YaZtVIAnFBnv4rO8\nOsOfx5aaaszdvy0X25C0arUNRDdFX1EIcH4vRVrdOicr1xoMvVmWk2ojAkS+\nf6vJ\r\n=sz+y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpyeGRoBv9NTcnuPFFzDO5y1M220mYNZpVM4+WyHtkRQIgYZRHvrMOCQHC9sN4Ze94o2xz65VlaV3D//4to25wk14="}]},"_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-radio_0.20.0-canary.ac8ed597.0_1605651123918_0.8773597952978043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.b6a60f60.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-ripple":"0.20.0-canary.b6a60f60.0","@material/radio":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2uQd79v89lz7SosawEZhFVxD2b5dj39ZErEWL+p6Z/bxf+aitreYx18roIyqpLPCdwN6boyA2p6kY8ALXwGwjg==","shasum":"8bf5778c60ad8802bbc647b0b598a5a235c0160c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.b6a60f60.0.tgz","fileCount":18,"unpackedSize":99915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQoCRA9TVsSAnZWagAACkkP/0feq/EAqKdTPZmiCJdK\n9OouKCcW+3513dj+Mt/RmiVJxZYJHWa0qSEmLhjmBE9jlgyexv5xNwilVIHR\nw+mIDyY589EJgmqWDg4Kz+eOW4gLMJkBnmvMGBl3gcl5JMnE37SJPdd+brdL\nW9uROszd52FMkCxyyxQoLAsFBmouZNkKsrYd9wMLUtYkf5SYGT9r719awB7T\nLOw4pc0WpsMUe8IbliNpQe5AH+gJ1TcLI8QqhWwGF2w3t2QAaJV37tUzJBWh\ndDLqQuYWEyUM5rtwczFaJ14TZiP8mkjCFlVsi1A4w8hyz771I7jtRaotsmeQ\nZRoHpdkVteOTgrwYpzUIzoROR0jf6LsCjfRIUARVEBj+QRMikFvFl8jtm3WZ\n3AMkrqKDyMy3fAhWWSG9X7NmaqeKNizCmeMqP+ZjngFjNYO+AtLGF57iprol\nvS2v0T8Yq1Fv5noIhj/rjzHpi0HH+5h7hLKqU+u2UcMgavbVP06+k2m57bNV\nv6fHD/eJ3KsHyCoXe5ZC+2w5QJaPfqSqpNccpnsAVitZxih6Jegdtg+6V8x4\njIgwyVkrrkyJwjXDYrcqHWdWM3fmXJinIQnPws/Hk3iTYj0SBAO/Z1sZeXub\njBiOpxf65RxKIj4KVdAFE1RupTPuLPVV8SNfxjs+kkS9wLZGFGYdnLgNZlV2\nTVzA\r\n=b0WA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwGqmO6uaJ7+VJbDZBx8nla6TIsJ2HNIGt7xDwXa1hCAiEArfOlCdaswFfG9Tnz332CiU3HX2KM9CNV09mAgGPVKTA="}]},"_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-radio_0.20.0-canary.b6a60f60.0_1605653543670_0.1275598138068601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.71cc24fb.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-ripple":"0.20.0-canary.71cc24fb.0","@material/radio":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-61IFGhAOIoY5945voP0HSqpDUFmKkJM+JIKfkuVJR8u792GoCOV+NYpMJ0gRrj5vjgstKtIr8RyX8684K/ee+w==","shasum":"7821f6608cd2fe721fac319486d836a22a130edd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.71cc24fb.0.tgz","fileCount":18,"unpackedSize":99915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnkCRA9TVsSAnZWagAAs6gP+wcR3vyHFm13T7r5zbga\n2WZck5h9YeMeVPSMaIoq+ekzgq64kNGDw2XuQjTj/nE15blNU+D5kANb93ym\nQ3ruGRqj//Ba528DacraQjMtpMmrFUp0p9AdLPC/n4RzEl9V/K1bs5Ra4rIw\n/vaqZW23tw6Ws0SAH4WKocjCh9eXBCvT1j5UfZ8V7Z+lVdPyDL7RCyik9l5I\nX2UgIIEPzqTtTgHvMItSe2uN0+DiU+LJ7SjecBuEreTBK5DfdZ19RW3LcstI\nKMigx3N1+1Ar5EtTfQL0FXsx6Z+h7QcmlJmLe8oNn4n1mdJu1BjJXQGRxLnT\nn/G/qAiVUolI8ZM8dAY1CPDQ0eeAXeHCZhXnREvbeYjz2esz7q7/LDm7F7C9\nsxtZdCNErzEGi94dWHko2+OzaCocDc361L5mJogoOaeAPEXqBCrznkRPHSJr\nBX/5VH/R6lNjaVVkTklwSQ3Q2c0XD6QLbMWwZyXXhzAX0X1wUZv70dV7sbJA\neOL09iPlkT9j9dCkDXQIbCVHakK9URgWNcWt1s8338Ryd+8jMx7upUKmg2Y2\n8D06PPO2z1wyPwXDoWZeC/YARSah1aYfM/Uw83Oz/xt97yFAkIRzzDNgNlaX\nLTQyNRhSA3hW62wxUUycztpKNv7X1mGngMqhQpe/gJxj7D0Le+G9gY0rypvn\ntssg\r\n=m0st\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFrEX/nCN4lnviUE98L0oxVolhDP/mUxnJ0HIv1Ee57jAiAZGldglX1mY64AM6AcZcBVqRW2Ko+yp8Rm/aWxl90Exg=="}]},"_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-radio_0.20.0-canary.71cc24fb.0_1605655012315_0.469889478392874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.761027ff.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-ripple":"0.20.0-canary.761027ff.0","@material/radio":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.482ff9091.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Wn4nUXHNgXwvHwlzG9GR7cPzbQ+s8jVi+Cn8FwC2qz+n+ylY9TDB7VjWiuBLCKFinRnlKx5FCIAXJX2DPc9zlw==","shasum":"3eeff665b6cc7029d3dd70364fd8927952e74575","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.761027ff.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZy+CRA9TVsSAnZWagAAhzoP/2tTxryWBu9s2jEIdK7W\n9mnaOJbTxufVEkJX/ebU1Ms2I3a9nj/2G2PzMcjpdBEhHjMe7DBkxnfZFdvt\ndgNbsnvmjwLstd+DJp7k9WAM/vECq20hhHEZfyZZUcdodSo9WMHdsSKPYzO3\nB7OREqAF+o1g0aAgpHBtICA5P0iy2+zjfqfmu2OQQ1qTOCKPpQCh04O9HQH1\nAsmdWerGtZvMJozvVZPWooc+aCCPAMiiRnLZCzCJp/anljpwxp+wdQhJfIZK\nkxY59AnKLGSAMyzIHue1muDkYiUcLp4JWmcIziNAq17iFvLUJD4jQMzNluX+\nZMstTYsOimEtpR5ZebPUwwXc+WDZHdCs/9wwvA2dfHjMmZyLU6HR/LENVJdO\nVoDzN3jQfQXudIZpdOPk4YYXJftT/ykGtcrAkz01EqUN/+YgTr+vEuxMxODw\nxhltI6UrWMhrlsCqMbfkULKxfSCAQrVa7elhcS05R85J1K69Nccd9XO/IA85\nmbx/a6GOHlODTnx2Ma3yhgSh3rmxQ3b8GPt1bI1uOprzdZB+yshawlSvveaL\njmgHqr76Ah4/MyVgAFZ5Vh+74yfCPekgH1FITlbMCfbsk99m3aYmc31OpSbr\nv0KQzKU0jhA8WzXIgLnNkLv5k3c2ltrrWWNE52GGutxNH2fltb4b77Vkz9ZE\ncyK7\r\n=VKFd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHd7mvsrJLT4qiRDVcmOhy9iJ91cimV1VXSQ/3ZI/9o4AiEA+IKwq3krWtd9yGTJ9kBX3UA0MlG/6ulNRkhrNlwbNMM="}]},"_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-radio_0.20.0-canary.761027ff.0_1605737662209_0.05753773633562087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.dc93d04c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-ripple":"0.20.0-canary.dc93d04c.0","@material/radio":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.99cfb6bd5.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yCmlWJbHLEFuEdTIhz7b9Lh32YbvKPgTOs3fjeU77xtyRcuu5Ekdn7yY0qq/gqZOx6I2U6rZJOgh7U8rb1AH6g==","shasum":"9a7d0d951a07c311cdd5c33c442195b978da42a9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.dc93d04c.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4ZCRA9TVsSAnZWagAAZZoQAIn9imOGm2+5MtKHpjAS\nkqHO/BYl74ptC/vmxXFfdHhrIlytUv5iF5i9h1ykdIjbqEDDUuz++5tFEh52\n2k6Vlno2noQVr/An439Ok2HiIhwbC/VnO1+T6S2rHsT0kpGHtBa3f1ER1UIO\nhIUonP2cE9tMpnEwexftKQZSJ9mazpELx7jUyCKjPSG7QO6XFb3sX40uFblv\nWwsbGMJZl2w0pUoaXDQZ3R0SRV83koG+8jsajUaxi3uwXb3BBWnbfocgEk0C\ndLBEmefwSbwb5mlNhCxF4DKejUoBIxqslfzluj6HwZxss0CGzvtgKsCkugZ3\nFAw4Iua6xul2a3KPWc3N+UIK4fcBw/GZwal81hNQEWuwDvrWAwhxukml9/Eg\n27gVaz1bQ1bulSk2x0hxoCQKuE2e/oHIe3GSeimnLUxkUeZ4gXZhEDMIq4G9\nSkr2EWLU1mmf3TGwGMoij71OTtWMGhv5NOyrf5Uj8kswk2JrKcl3ZNAO6OX2\nWt2jGhfKvOwzNxV6af+er37B4t5PXp2Bdbo4NP/ndgKFDnXzM4Bo3mntvirD\nl18FZLeLYmCovzIFZHqGzbD+pdF2I0haVvkzBQAbNhXTFFJydTQzbossI2OO\njWizljaz2AjFNDk7xpIbV/3f2W1K0DKeP3JtYj8TGIKJBfCdw3PB6s6Wz49b\nPdun\r\n=6SRw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2fix+zdGpyS7J7xmnr7+OLCTchSzzZ75H3u7gE2JfyAiEA5tRjxKTjP16e3YZBgCWcF/bdDNH/zo5AsYqd/zdOQnU="}]},"_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-radio_0.20.0-canary.dc93d04c.0_1605738008580_0.14296807154530367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-ripple":"0.20.0-canary.4a5d4eeb.0","@material/radio":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.99cfb6bd5.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KYSXwFOEYLAfIqQWy/CnWGSoHo+uw0ALsD4wW4M2RMSdQ+C0RZLEy1W8vvwwR6+U795K658K9jzb69MeraUi0g==","shasum":"cc7ec16475a38588710b1100cacea8c317684a80","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldpCRA9TVsSAnZWagAAZWYP/0NN3/ewI1xkHQKv+zxb\nq5QBIN337llls4B/LrmV1frXX+5B5yXyH/7RyvHUJQ3Idi6YUPbAlSCPKptb\n+XjRjqtCnMmIF71EEGPmSuKKxlYkLS5tW8k3eYdJ5eJR0/bvWvHmTejscBNp\njGdwxHWCAm5h/UO8VREnRWvJdtso8Tt1gqEt6zB/8GsZxvo+b4m8TvWUo7Dq\nrVg0jeK0O7gjaREqDCg1nPSH4NbSCVka7ysLR574fp0EkWpSa5uV3MrW1tf9\nKxwvMskwz2EwpZnfO2W3IGzsG+++m/oNKtosoTYlVvtnXwtcK5yzcVEenUwG\nXGuZZY5+YZlAL1K/FPQVsACvPa97kgYqGUaDJG5xtdK03GaBLbYeWS+GAFiV\n6DCzNAYDzUngBEogobWNyjlwPi6QzREtYdH+dO/ts2FaYNtRzZSVoYAEGJeh\nv57iWQCHQaGCGCavSDRJsCR/SbHLW1DPb+wl40F/56VtSaZWJGIb40GAj1Sa\nKkDPDJH/6fPMrRCb8sSc+3zkLsp9Gws5oiQljhVs4DquJG7pbn36hWFZ3Rxg\nsR3RbRux1HuGIZrYp27pYpUBIKw87JwxypTCbv218rmnvVmas969lpZdLRm9\n1ZeEW3mIhgcrEsKdIWNtKSFcfCLjNEzxwG3V0RiuHrveIxE0m5eZp9WzZSON\ngHD9\r\n=pwyx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpRdfDMldqzMv8qlNB78twB5ldYmhzQpBFAiQ4CIn6GgIgJdV6JlBw5VWpcQJXK+02j/ZS5hM6EuIY5rzx6r+/mYA="}]},"_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-radio_0.20.0-canary.4a5d4eeb.0_1605785449330_0.1537622049608529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.bd176a15.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-ripple":"0.20.0-canary.bd176a15.0","@material/radio":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30c11bfc2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gQd2wDCwmG8lpqtuRoeuYanI2kOvq4cOTEKpCqUJDPV7zcx4IHcsl3Hgc3aljW1pvrHdocRhMeVtkOxaT4492A==","shasum":"a45e4afa7504c80721c3847ea6db2c151b0fc941","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.bd176a15.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMrCRA9TVsSAnZWagAAgXkP/jYfXJxXt+cynnfIcSNt\n/JlZBbXh+WXg1I5M3cg+UJIMbRqxAuWCIUVD+tbtPbuTcMDvLyct0Bgh57Rm\nCNCWw7rFju/ybmMzbgj9wtDPfbPERJT89QgxC+GAfaaUGEjarWlOnS/OwOQN\n6PC+b+dUkOKcAj+XI322pYI9SIdDIE6Xfh3nkAnbQn7TMwBf+JxyBm5FFyTe\n3Ji0sM17Do/jvIiYPIhRhlfhQRyrI+JqST8bMLQHB4oCWnYHAd01udDUaCS1\nGT+vBk79ZaGlyyYGdgnjoxfHNX707CpgWqmp+U2QmUQTRylaF4MosBR2P+8o\nF/4tmZHoM1NrRZZIoRq5TCWgotI4FIlgHFrakc1Ap8CgDLqlcrSSq7erBgrb\n2bu38pB5hXrrKx9nx489nM0vRsphA814kOb4xy9F00NoGgMbahUUgyAzdHIj\ntp7Jf0m10fWpWxxuTh8QyJAij/GMVJJ+a0p+gNI7hp1tAIQdy5ilXZixuJvL\ntGyEVeg2b7cG0FKnsGta3riOnac3Kehu+Zn5/Z1pvf58jBrocnegzS+/bTA1\n76EBfq/ufXS4/IUPchUn9MasKXS/JlWIAxXDi24ngNr14LQKHSkRKxhZd+IK\n0EGuLTo1StMbwTB5ahiGFIS4BqO7Dv/E/aMKbpNffatk9vEkUmpR46PUGSpK\npP5w\r\n=44eS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvwplAIcmVM219M1SrvjTEp7GOlK4W7gtQufHZWliEXQIgO5/1IzgJ+PiAiHNANalwTq14DpXHJh2TY7gJRmbTcpQ="}]},"_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-radio_0.20.0-canary.bd176a15.0_1605813035096_0.7378999994111284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.e85aa60d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-ripple":"0.20.0-canary.e85aa60d.0","@material/radio":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.c927a5d05.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jQIKiUuHDv7I9t+Lz3nBNl5Ngp4me3WKBthYbGcC8AJ5n55KMCz7aUJaQP4YR5gezyq88fL8kFqnjNzPDIhgXA==","shasum":"7bcb85e8c74038738ef396a28854d43d1cc16967","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.e85aa60d.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDa6CRA9TVsSAnZWagAAaCkQAKCnT6iFlUreKeOHcv1o\nMvJVD2PwcKXsku0S7nAgAXQW+1GSJvuo8BjhUTHyZtzMgteybOo/8npB8kpP\n3ORFAyaBf6/WO6OYi2/3AO+mRm2SzfIPxBewHexj/20eKyH0rNTO3vBoxNEm\nR+maU4abCN/lhbsL1JNp5EQLQcXhsLzpCMJ/n+J7hbVkMGqbIXePBF1kC56U\n9bXx2LYxHPsM/Lk5VCgrkcg+hrqv0EdvwZyA1UU+wUdGT3elJf4AIUi8hz/E\nZAmZXThAEDlAMpatZ+QshKL8dJ2ZxVuwWBnW+cf53rK27LpsFQaseYvDmChQ\ntZaWwPkorlhxGXHOqAjVJEIFGCTnlsBEiURBn9ArEm5hYanGOlkfeJx8mdwD\n1mZoCkzaL0gs3EmIzC0MKiB3Xr3/9drZPKRjeEQrZMfalhr1Qo806ohzHvqO\naTQ1z2ExxSGv4B3bdbeUs+Y1tLfAcF6+RjDtvvhxx/G2aANMTfAGTjomhv3n\n8VnWKjUoaRCXSLNVyIbWxmsrjPivpglEsTG3Mj12Szlt+8GNafrARRae0jPY\nNZLf6jLzwKAkyYdy7CRZim+Q9t6r5uypLLV63kW4rB4B76ypXYr9iGZQH7Ip\n7uu6sFl5MWX5T1zMTifkbUKtQuBOwWwtDfQ16NFE/0xu9g8bx6Cv+rWJWmq8\nD7ah\r\n=616d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/oMu6lwl/0z5cmjNib3G1VDSbXSSfe9D07kbJf+yXSgIgCuQaVFKM5/e3zcw8su2uVItQERRweqafSuhPwNgaB1M="}]},"_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-radio_0.20.0-canary.e85aa60d.0_1606170298031_0.4441883605918435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.72092360.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-ripple":"0.20.0-canary.72092360.0","@material/radio":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.c927a5d05.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-r5ZnVQtsPMgfmId5RsFWyNg70OQcrd8noP4VezJ/RWgqhJPyqG/AcmiJPc0wVrXFf4qcAAq472iQjtBM68+gXQ==","shasum":"c1d526bf637ff7c1e678e98aa7997b6e50178d30","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.72092360.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImOCRA9TVsSAnZWagAA3JYP/3s3WrMvVQrV0+Ok63dD\njhtWuZxNLA0DxLGZKmpRlygQgv3t/9dVI/jGF9qFrr41L1r+biM39WJaE4iK\ntIBLcHCgrWK3G0G1pa01OfRbCBuyzduqMcATLbTSiuO3wmffjiZiqcfzpBY1\neRij4TK2n3ss69gUhMv5pb3xRkVHyavBP5/0QBoZ0mZM9HTKgMZKPV8FuWGy\nFN6z7JziyXGi+Nld2sqjJ4NTBHSyLRc84idCj8+6s9hq1eFoPEYdRwI7h8BN\nsVCqgv+aiHvwqSmP2g6uouv9IQ9Kdl3OgZQEM1PHjxzHA8CvG9xQknQFo2nC\ngjOVxVTEvYRsXEbKeji/o33zS6ZCOJOOipzx5mnb9RAGGfL9YWT3xQAqzQqt\nqzM5xapUKgUq5vZ1Vjxq6O/e6rxeD94mdTPYjLlAt4uQbloInLEANJRcZPxU\njdFq3xwe44Y1u5dKmm+tNie8Ty4o0P7tgautgyG36qBaOOd5pWc9GjrfE1gf\nrV9YaSKBpq//nEC5N5DieQcUADxnJ8r0mufG9/OIzcxEg9SaPKimg/mjtMFr\nfYMox4/BLZUxumjFkbpXGtXs99yKOJGVwfLq4hvB7K+xHrWsHnJN8luF/YS2\nILiTeCYP0LlriWFbOtVadA4Iz/nKbR/VqD5gn+If/XoeSLns6XdGonZB95NY\nU1WS\r\n=kl2U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDL15uMmtJ4AA5c8j4Zra9aLItJAiWBs+uLFqUWTy+7OAiEA8fIUE7S4TbWI2Fa/eU+6P/TJ8SPVSNi1H3RToHUyFpU="}]},"_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-radio_0.20.0-canary.72092360.0_1606191502138_0.2930402568854711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.baf9d39f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-ripple":"0.20.0-canary.baf9d39f.0","@material/radio":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/l1qTK6nBdpwfMJb3DerwimOtJFqsPyyXbktuffRCn7t4AuM/3a3po+EDMKW6O2YmBVmeJFNIf1TNP9fBC+OMw==","shasum":"020d9de72ad710270b32b528b1bac52abadda8c7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.baf9d39f.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEvCRA9TVsSAnZWagAAAr0P/ja4wMnaot3qkAIYNg/l\nbtcs/eZwiSLUqaQ37oAvhHGGsRGl3il7AdzCG4CsxUJsPbPHXAWAT3L6gUiu\nRrikJuPalCkKpX1WuMpplk2JGaAs6yTJMZ0nHtQh5d4+1Hqr2/7J0BpnZXGE\nix5c6S1Bo1J9YLPTfUk2+Nxbobi9BUJO6xRyF1YInx55A6uM8/gn8yrUUq3v\npqNDfufs2Uss64algECIC5MoID6pLtpEoM8UDxJ63coO6c1mxQs8ZbbguaL0\nXwlBN4aa91+fhc6N7JqfyiGBLUDU6pHi7Yv4vgr9upkgxarGeYcm9j8AZwnP\nSCJfhLoBmyvRZLwixyINSIVxsNFVifNiZ/z/XxiUxFlTvOGOOlNdYy0JHwZk\nGfAkY5hv+PTfaSq/wvYh/8I/6SjoyuKYdtlH6NQJJ8MOCKdVFattsm3gO1/H\nqJhl8uvrLlTRwiCrQDzlCBKpaPDP6Mak/7wBF9/WwGw5VEnLyoDKYZi0ljA4\n5j3gyH2Tk3TAQZgKEyj0KadHTAektGsAOu7YhrCpvORudCepSoqq2LNJwanz\n0LkdJFxxKgSgUrlC7m5Nfb/gLQReFuKqjVbgSbr5pGYupWupL7MD+JXsJh2v\nXCOrVdQwkVD3TykZ+IygDCWxcvEWskMG4rk5vMjfc8IvN/Kv/yhspFjI8RKp\n1epn\r\n=YgOQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClnI3eyx2iwzyayMDgL3lRjxEAtgpR9miM/1e/EvPp7AIhAIzcrQ+IzunfpFoe37JVacQQGFG4Bq8e5bdSKmcwTT4G"}]},"_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-radio_0.20.0-canary.baf9d39f.0_1606340911369_0.48090036365361755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.51aab0ad.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-ripple":"0.20.0-canary.51aab0ad.0","@material/radio":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qoA0oqZk5L81eHby98P7ZVkwCoXE+kdYhe6AmZDOfjpPJ5i1j6ruVt2WWIixQFKlEJjbHFUifdHl0+pA9U0z+A==","shasum":"61820c36a9180e404071e8de2b741724ac9f031b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.51aab0ad.0.tgz","fileCount":18,"unpackedSize":99961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbZCRA9TVsSAnZWagAAuYwQAIL+Elhf8KxrkTyH+v3M\npHnLnF1IVK3fv6dXnynzOdUPpNqJB2J2w0ledQ5clVr/x5sZ78IRgZyF0L73\nsGNNJOtkeSBp/I3Y2B3/+NCHMjdHW1VK7HJXKEN1MC+wJ5wcSgXY82oU9+AE\n9PU2NshTU3Lwkyt2VEp5MzL1+OF+X2/14Y9Kkl7q6t4Z8hd5f+Q0TQoi29kL\n3djtVxUfgT2ASKbf4zVxi4tphCOfQRsMnJOE9Zi0qIAHY1DQSwIESNSL3AEc\nKGX2m+ZTgOVGTtzxRIkCpFihbXgK3qfK7YFBdSFlFysN06Wj9NtoS7iMQWB9\nbDvtYNWUw+1P6E9WlunRe7afGccDF6jGxowqTSCG/FbMtnEpSDxwdoPZnJs1\nr08BTTeSXC2BgLAUF++NdXdhInoRFNNjcYr8pSBwB1decgDE2/HNtiE49ylD\n6gBzYR0cePXRxeLfP8cdfJdIf5XeLoJMSL4h3yYarikJq5Jz+9E+IPIn7B/f\n+SJ5qQqRHnBffbC5gWklbfXl5hc7puItBw5rlHYJJtEpTV8dA9wCPFX/nLOv\naYRZ8pAaqxqoFckL45VDzbVTcIg70e6GMk+kXV0jFxOZe84+KxENNJXpTEs/\ncdXBzNR9oq3Bsq8P9UnvlBb5QsIn6L8MmYf+VwLRRqejDUi3Cc0sPtqc+y6d\n1DER\r\n=WeaD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaINVtuk84mN7K2P/ZUu3PyfgtU9km4s1JJEwWLRflkAIhAOBLcoqcQzE+E/irY9eikpFR23Ke5oFDAvCUU3LF/2Jl"}]},"_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-radio_0.20.0-canary.51aab0ad.0_1606784728838_0.16483543250744925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-ripple":"0.20.0-canary.8fd4af5b.0","@material/radio":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LvmrH/y3XSrMjlkcwJLFbYKW6+Bo3dHA5OeJNFjQOmBCekBPP582em4RpCaoZ/53BrY+BMRbAg+lIWNKiqL0ug==","shasum":"661a1d484f0b29a9d532d7d08700b74011a13b09","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.8fd4af5b.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDtCRA9TVsSAnZWagAAeLoP/2AUyP1URxot0gHYCROo\nMZ4lUWNB28RfykhjXl5uKxjbQpbqSl6tKmosqX2ujVIfh8Nfaa0pLEqbDy9k\nchsaXDG40EOzAm/LZOvOO8mAzi0DM+zX0x6xlob4lxim8HtgzqM+EBfsm9S3\nUvQxRU9YbUpTQi+VcTvnVUn1zj/eTqPJzbI519lPLhXbmte0H1/43bhPX9L7\nPfvNr6pO3HXGq/LLSNSv+QH+llTowmUiR9kgfqV5vEPT2PHY5FY98HNG96po\nKhUoPpmyqHO7qRiiG+O4q3j0IO/q22aofEChu9GZ5H2X6Dnhd4E/ySyzHnFr\n5f8F6RMmaFtBVkdbrwXHTpYjcuSvtyA2IpODvD/NFi9soaVV+dQrbY3WLRqd\nz93sJSGUWNyB3jwJdnPKCKCmYy7eOzNKMWEaWRT7tOqrXTRNIFUnqrBAXMlH\nVCgFRoZUe6uAfr/a7LPQe3n7PCpk5hJAxdkKftAxPVebG+bZBb3shjBUSSzJ\n5UpvuTdWiLizVaAreHYZ5BH0w40lW4KEOgAz5ng+MwRGpgBNz81xSLqqg7Nf\nZPhCPKAPx/7ZgkaJ9AVAF981ifWXaa0E8oAC7OM4s1Z1P3DqBsWKNes9c+79\nvze0LuUi2xBk2kZJvEUilDj1wprFefBtCKyaOavsOPgs91dbSFzPP825sTxe\nAg84\r\n=wvnp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR4hmjl7vqlTYe4lsTUQMEWE3oGtwX+CPkn1CwOdk9RwIgUg1jYvX1/0yELBgd5gY+S5IvsaTUa+ZNRTqzDd+Dnek="}]},"_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-radio_0.20.0-canary.8fd4af5b.0_1606955244863_0.10730540516564457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.26d14d2f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-ripple":"0.20.0-canary.26d14d2f.0","@material/radio":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.ae27b44b0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IMr/1U9nmqgBmNFRXcgQHd5d1Fes+NCB4fOVEKz6sji8adOUs6387782HfHJg15y89+wgpecS9TkKNxMmqbZSQ==","shasum":"19077d0cd83a444ed194c9abc063ffa183c1e00c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.26d14d2f.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDehCRA9TVsSAnZWagAAIP8P/1i53+oUSUsy9XxXcg36\nIxVoLRpgjjG5CEfN3xQmmq6GVbWKugK3eEYBqKxolXIugUtgKe6SZdsoXW7O\nZNM4CWh1gLOj7OTPQPhZslDm2IW+8Pytq0HSS15/mrbdq9MK6k3qUvkrFzMp\n7xjctnRrIBb14fFzYHlOZ63q86RKpXC8Mq4F2XL+PDgoc3OM68FCByLb/v9T\ns420/0EvEWGYNLGQ/w/do2fec5DGSfGKPqcycx0ZInro5q7lZsPXIqd1OCGH\nc2BXQoYBx/LqnH2smXGiq17DbumQ+GDeK2ypmkKlAO+f0V1x1v8Zd1FkpWft\nFSUEJJLRTnBYzH496Uu5Y+R789PqZwCPGqROeqg8o7NOvlUULjq38YCZYd4q\ngE1ctsedXqseML948hjajM18iUpvcZ9J/R2qL/vpt46s2/KDLi5EykChJZmj\nZ+RMTvNC0DzuPQ3Pn3NlK3xWPJtQ1ZKxSHSWIklZ6Vh/LmWpBsJp/EYtuCEY\nfciedj5Za9WmKzFcm5Y15xkGhDr1IUt+K3uZ+LU7P+mrMjSEIIzpRIq3P3HN\noHk7xdIpMrQGkWKiWCvE//KxujMLLJBnoHI44lGIet5y8ZVVFpN/UJffqGH0\ngbqmhcmDtnjdPkMCYBYib7y4p+hsJTJCJdozAyrvqPhHivaqyPWXtAGhzyKA\np8IV\r\n=3q8D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuMYG0g0EpBRzWvia7QNcGQlotOLdKvThL7QXYccEinwIgJBIy7u19aREe1us5RSStKXPTyCdpAxqXL+pm6oe/jNI="}]},"_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-radio_0.20.0-canary.26d14d2f.0_1606956961289_0.5111371863987593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.1663d7e4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-ripple":"0.20.0-canary.1663d7e4.0","@material/radio":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bz7A4gahj+r8BTDRU4WC8eXyXD357SZqKQ1CM3o7emBj+moLIamv/1JED9Tz6qiY4pgelX2L68K3IzPlQQuaSA==","shasum":"a1101807f9164f9a6cf1f0b2f9235fc1095b30c9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.1663d7e4.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDx2CRA9TVsSAnZWagAAgYoP/0UQ+A1rjmHIxzpo07y8\nTPqYCPq7rqKTkEuKcnL/RFOGnKWCunblFSvVk3vQvC9ikz+nqa+obFNeR0o4\npH/X0plTgHhSRTHivlYNZ1xxdgnGut7n/wzWG5bnQ/Mkjvvw4M839cf+yD5V\nYsXrQWXZEoQrJ+QDOUkomOOnZ3SSJapENVt0vvk8pPcm0inJ+RNErW5teiVj\nDL64Wf/jSxUOGSNKs1HsC1ohszoH9FZYsiSMyoFmEmSukwnYf964Me3cemli\nCzlHXbQna+4PSMvtt/J+q8tzWQUogC/G88V9gIgxaLz2eS7TzR3Fdhbn3uRl\n2fJkcWn40cFFiOav9nklLnI0e+NghWlhXVuzzRlttllkXGaNWntlDKUK34X0\n/gRVAfV/0N3VIJ+CZkCnOhg+BzGeQ63UmpADqWv73yMm2SOU8mXgS/Y4aTDm\nt6f4j0r6zdmaBAsVuBg4Ym6YSr9MAMH2DyF7qOSlv5folymutODIT1SDAUvC\nmQ4EPCxmPGnplnLhLD6uwyqRv408PXO+hND0VqePe31HWSEoA9iQepaHaZfW\nQc4GRGFECIpUVVvt5RBQmWs5QWsRFGDY650/T8nSQUE0MMQM6wtCqA9ZC1of\nD7hYrgQBhZckPsp/eypnQ+CFt7uixMuFXJ9hC5nE+H/W/K0aaZKmuZ515n4k\npYgs\r\n=FMeb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFloZXW+WBUCb+XP21VAx/WsV75iXJIjVxPX8nVn2mrgIgDilI04jc2pTEPUx/jfl8nkM299HQNq4/mapMJy9CJ2A="}]},"_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-radio_0.20.0-canary.1663d7e4.0_1606958198052_0.8705200998763163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-ripple":"0.20.0-canary.cbe9fc12.0","@material/radio":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-X1qk7Hkvj7t5kTMl1UXb5LM4CzOdTiLDX9THB1HGSfiYyoFxtrwZVzn8Ww83Kqm+xi76RqtZh+0c/FBXLX0Xpg==","shasum":"02f41a85dd59436389b39d1f2fb9bb004d5102b8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.cbe9fc12.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdrCRA9TVsSAnZWagAAXtQQAKCCMKF8vXvjsKqSRjr2\nAQYwEJOTOFz2inNmEz1ylhJb5PCEOmzBrqK/Kh+qCjklNeYSNtWALaCue4Nq\nhM1pAqCEEhtZ5DzpJZn7tlnURUeuf8Dg+6y69nVQ3kGojkwhSOn+V8DQ4d4S\n4uC+YYXo7N/WQEcUAL8wlFncQpIduNYALn565ie/g4A8/CvtewC2bBa73gc8\nq2vQfvQEBczILtHDFYP3M9nFmF90DohHPeNlqNYHocU8/7XqDAwMEXGyha4K\ngAHZnNc0ZdDM7rGXHRX8TrvEMM2i8jca88ad2EIA5dXl1klduG40jGm/tXst\nrhj/0w3IZgAsGBdmCme6+R8in4tO7KNN22R2y8U8nkPc4E+smxjgGJ4azT7M\nFKnj+IMMdR/ATfGVkVQWcCBy4i49W9cnNL2zRoG6LdzDVTxx2jDcyCWhHyX0\nw541RQY+uhGqVdJDczm5seQr5P9BrhOLmadYtItdyqHh0L+Ci6hyyvGnqZ0n\n0S9/k6THMDlh6Obg4tu9M1jkT+igJBfw09lfcJW/PSslGZ4QAFTYUIi91Pjn\nHOfzxMhBKxFpcN4AjGVxJCA00C/Ye1+DcE7QkHoVsQ43kKCpRFk+4y/ZMtv3\n0QK/W9zpV1G1FOfJLnCiXiRRBTR7MyV6alhKoxXLAMEO74n4S7ltMRgeIVI5\n8u/Z\r\n=WX3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhT4DdpEWsMOaIkq9E3pn1R3PRroo7TWXwQJI78b9NLwIgIICH6A8RkUKJjkaJQMYQSlOhh5p89BFFmmiw0WCOjhI="}]},"_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-radio_0.20.0-canary.cbe9fc12.0_1607022442899_0.6092997281362904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.9755be10.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-ripple":"0.20.0-canary.9755be10.0","@material/radio":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.11da3c0db.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-twTqmjI79EHkOBexRRLUbg0b+oBRjcLN9u6askDKPvUtg2RssEuA2W7rG0OME5EM/vIfk7X1Sic45pGRMEGKKA==","shasum":"bb8717d066c2df3515af4a2175efe2f8f1c38f3f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.9755be10.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTupCRA9TVsSAnZWagAAQKoP/RJTDb1BQgyLEdL1hX6b\ntFYbRV0yDPjnwnO2yFtgOCsEdUyqte0ZtX/5gycyacbdCEqL4yIwKm8mGi4c\nEhtE7+i+aD8eydgX7GVlser/lQEiY6YINXJFrTeAJ8F+x/pFCU+QsUIBnYj5\nRrhGRJoWLY2TDtFbF8sYTNjGWmM880TaKTIy1mSo+5mWJqeKwvl23N2eWMVJ\nL6iA5JZ4b3TcRXS2qe7lzsTnWnA1FHRE08Fqq0/l0Rg5Lxv33B55run3tGWB\nCbbPwnRkFElWzG+AhWgLxnUUUX/O02OJMWvDOJc150ReOaXrJNVXLODfEduN\ng180/jHMFa0SdygnEdVosH3XK8551dmRyYayzFIz754bX9scl/NuYBkfcAm8\nU+5HA1oAEqu8g8+AGQNrq5gDphZm5KFLX0VAeCvNsurYSC3bsWU0KvjgoBEQ\nx51kwIZNxTs2SgDnRZmBsuptxrLkC744ryigRGV/LLE0jYgHT4f0Lxsuv5uP\n5iVwn3quNJAdnMIMlOHIeSk0ZJ/ztCfgkXH8n6iv7ltPBt/7I2kvJLYxv1wa\nastJm/6XA5FHfsiusqhA8osKxGXj3m+GQ8w638bCE50X+SBPnJduskjFxKPI\ntoolVzrViYwuCgPHYCpTTtbOWfsa2/B5BNNn/Lq32z3/ch6WDqp1Hnqh23BC\ndyi3\r\n=ZLCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn9k8cEXl6a8yZLTaKMZoVwnj/cwAH2WZ6juS2NoFLiwIgeZfK8D6NCBXnQbUNDxqMHWy1nJorI1q7sK3TnvM0IIE="}]},"_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-radio_0.20.0-canary.9755be10.0_1607023528966_0.2423856633021253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-radio","version":"0.20.0-canary.3f64270c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-ripple":"0.20.0-canary.3f64270c.0","@material/radio":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-w4yH6U8tJppxE9AXLt9XiDTF/4vujHn/xEa4+HUMxFOAjhG6gGDE/chbpZpnjhelYlS47NYfD8OKU/ztQDZeNA==","shasum":"432d9c5049f1706b960a4d0a8e7a690c4d781e0e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0-canary.3f64270c.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2HCRA9TVsSAnZWagAAP6YP/iKQiBpcapdRNI978kkG\nw9bu1YF0dERPqAyFk+rOvp+xwZ8cLFryO/u4PI5u5MqTaAtBb4KfYqADd3ow\nA3j2jB0YPQCfJ7LrIp4G9P8JEEJhXE6hbo5K4OSbNX+/MaYl34TV6wcwbsUh\nUo5/o/56OXM5TcC4ctdsJYp8p+YvudlCmiJJJhqRMcw93g16uu7GpQznJ3PU\ntiH71CVkAqqVP6s32v+3pK6yYvWbfLTBW+mN6JpDyXyPmTGdOvGq0EygAalW\newMe+YJy23ioLRuvBJXOvI/J0V72krDaBvVQzoXnclFeVa+PvOO1yUmsniqF\njUSXsJvi2z0vTkeq8IXRKuAQtEc7rsEVred3/qATZ/NnTUCkGmkQc4kTK+qu\nOR47yffIqGne3w4/jXfsT7RYxzUS/kSvOi7EyRzObzPeTqNJp/OKTYsqF388\nmJL52HyxJb1uye26dIsleLLQFCNsLPVrWlG0F1mqCW0rZSvjvP6MbWzB9SJY\n+d/Qt0gjM++kMLignUIs6dVgmqP4A+97IYCLU6qm2v4CogUkppdlpbpqafLN\nDFiCXRWR9K5O98LNGfZj5E/JdvFly+1sayIWqpC9lYfdHe/V2C3JFZ+Upvqr\nl+XBKf0suRhGDxxvZueFTj80bY8YeCjv/kIBLssbVi14g75xpIpKhem08NPd\nNpvn\r\n=/mli\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxnnaEJt7M9Vz1TZfNejCE3ocd4hobytrN/OuWaW/yewIgNhcXrMSOnBChHAXeFRrMlabvdROVI2FS9H2ZxdOFvmw="}]},"_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-radio_0.20.0-canary.3f64270c.0_1607032198730_0.18640378513603806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.d893b14a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-ripple":"0.21.0-canary.d893b14a.0","@material/radio":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1NXvh8GqD2zb1RAZ6Cal464UI3myJl1Odmzr35VuCuI2oICu2uT8L7LEDPTJGDWfahUULT7hwmV0tJpvU9bJMw==","shasum":"66791b856967c1902fe133db490a2efe61d87d44","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.d893b14a.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYFCRA9TVsSAnZWagAAk9sP/0gxzrLKgdqWBJAgTyLy\nnSvGzZTyrYJwmvnS26AopylZSaqS8HgA3gOie0c3giIp0OgnLXgMnf1PfkpW\nU1/rkkoKsHdDIVPSScmtnLgRnTwFOL+yiyBivm5VpPGOsz2KVHroZV3CMwo0\n6m/ioXbzKJl/v7sK9Dhb03aGeO/L0Ex9CWmnGlkN7ITyVccZvi75JaZtjAZT\nDDlBh5CKH3fq/IPFU8d1hZhPDuqwl6o7eGhWATf7FZgh1YjfTkFTNpJUh1XS\nHNlfAcglTBJV89AWW3mB4xtaZpqCXr+SNmksyhbB5ixsT1ETThywKe2KLULC\nFQEfSVRxW6ePGpOIk6Dy4gk9WR5lPZLBkq1IrECNvVT5wW39FvnEmH/KXA6/\nHw+fbSnK5KNKFmjOzdHlKuewzZfm+aimJTcHYdLCRcxRKs2Efc9fBPuVWSEA\naPd1q5KXtDGTr4nIp1XUdn8kO52zJhMVxIYuvYjYMkwUz3cmsc1ulPjOOmX+\nykxweGg7JlYd6vlg3MW9jWH1v7gsZJhJmMCDOQsxwBq1IPeSDnpbx4PKVNvi\nxdbkfp3tIYnYaJHEdDvXK1hvUyLbbbWjY+MpKnERhE46vYrhXRRvBbP8oOw7\nCZAjmCkDE9x9lJVH/Q8ggILx2kZ7nG2ig9Laim7eid/UhsLlGSFo5kZBBjUH\nADyb\r\n=zXZ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7qETgOI9vhMpQn3xGyBGYuuYSzN150mo/8qRezqWk1QIhAMA7mz6TFRhqSMfeJZUBtKUu+kGnCT0+Azb6800yRDKf"}]},"_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-radio_0.21.0-canary.d893b14a.0_1607034372717_0.9085445920206117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-radio","version":"0.20.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.20.0","@material/mwc-ripple":"^0.20.0","@material/radio":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"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-radio@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-aVsok8EZJQFHn5VW9iP4gxO1wY5XeNnANdP82GhHZfIcxp1AQDORuUSy6Qoj2YBmCFCnG4BGAac1zs4OXRPRqA==","shasum":"bf282fe5bd3f0f8e6c3eeb0b781eea6bc06f1743","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.20.0.tgz","fileCount":18,"unpackedSize":99971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWalCRA9TVsSAnZWagAAHqEP/00rGvq9L53YpyFa2rR9\nwf8ktsVq+fiV3l6e45SyGUGFbcn7WWAuSMhIsPV0jaOHNqDwJeDp4zFFVOAT\n7dq4JT/3Qh0t1yanX7zzg8pFUu/ekrTCU/Feg+WCjlniINd1V7VJ87hHAA0z\n6umE6xDgo97sdt7MQDVGX1RhjQd2acEpDuk4WvOVSUukfrY+QtTrlbvJVBB4\nq+kvi/EjDbbgV1wBvp9cjgFSNFoYwlj/m/jGlinKdQPzeRnrRwt2M1MuwwcE\nR6Ss+63JatynaT2maZHFKgNeVKIaAk9szjYNpUSJ9KhZqNdxUysKroERNpu8\nebwmnpgCiidqNFMk3a7BR8nxk+oX1thKaUKHcBnmAefyAleoWhrL/9VA3Tvl\nPTONSkuh1MbHg5bXgLIr/KuJIXjcTLGDFpW0vyy2w0LfF4wEbXhvxVZeL2FH\nNWx65JvaCe/ds1B5Tr/eugazkfarVZGjopakTSrXR9uKeQSuVad+CiXPJyKn\nh8ABIh/XbMItJ4I75ytfDmQJAj2ao+07M9fIL/AhKSHouH6aYrrZs/b/aBJ4\noUiLtfgUB3qaIjuJGLcJlS8OZM8S3x35owuWJo/oNKAi7jiI5LFne9FfGX7U\nanmjnxEY0TUYorq7kXBzNzSZQX1XTIivg3JvMQl8z6lr44z+xx5pIssbvo0x\nnfJ1\r\n=zKkG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHj9gGVhXDtgxUR7FaqpYptqVs9X3Wxp9aJoReEi5tfQIgYCGCn6/AQPDXoVxFIA6uANPpXHgflPR6KNcTi3KH4Qo="}]},"_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-radio_0.20.0_1607034533218_0.9260532372028869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-ripple":"0.21.0-canary.47c7d7e5.0","@material/radio":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.1c156d69d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-d6A90fE4JkOjWEuosDXHkjfN+1gtHuBZG9+uVpjwRvF7qLi8qq98adeH64qnKZTvPKsoZAojIY2/B/0jfxXiUA==","shasum":"1597df971428d78adb8a2634853a0e7c571c70f8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.47c7d7e5.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088OCRA9TVsSAnZWagAAXIoQAJcjlEp6ygYxwVBTJkhl\ngT9tZ6RI9KdUPNntmvdCZnNaC8b5Z0NIVf0mZ8oGnCt6yUppSoMDJD4UbhW9\nHTHs9BdS0p64ztuL+r8oYXKUbiBQbf2BXxzSAhABN1n92VJWu4FoKUSEVyOK\nfofRBhsb01UTSMDvtDlEHzRHKvJ6R+skHfPcwfbaOrudeTZzhmcx2kZL1Urc\n9bsyY5C8byzhe9nbIq8TbDPZBwPfHqOLXQKjY4y1zWpHAUBKRBx0iOuRRCKB\nWmp6A7QMtVSd6E1PuXJT4LYz38MycgYyUb+n0Wiy4VYe3v0543AXlBxkBdal\nr0H+C8OctpVOn5NVAFG9msEdpoilwnYgsoEskd3SFMIM/K6okXCq4y0rpW/a\nktKiX2UucirpYreS0TFD5N/ZZW8TCNlclHJu6O2wI5v4aquZGP6pURh2Xf6e\nnMqfCNH6rV20Nr5yjR0FX8KWrn3D1ZprfnmgbNk8G8wy+w4W2pIpcrX7bV1W\nLbxyi5YKZv8ebSe6zhxhCAlEnturJmBgyc6qzqcEl+luFOUQ1JfrbX3aZQTU\n3s3RvDG5OGoEmGj1HtJgjDy6eA6h5nLO8Wnng1u3CL0dknjs4Ks4II6JAUmO\nmVmLkpdmuFqoBzAhgwlPbwtF65Hb+EiJrOu9MJYB7n9x4eZ2yvQgiIhUGe9d\n4XDB\r\n=Au5B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5Tf7mmbT0aimp71iMgacJdyGZGEpBci1wClT+lr7v5AiEA4OZ8SkM5PUgqAvH9XlSDqshaeNZafAjKzmiUcP+3BYY="}]},"_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-radio_0.21.0-canary.47c7d7e5.0_1607716621608_0.8917331094667609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b304a78b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-ripple":"0.21.0-canary.b304a78b.0","@material/radio":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.9244508bd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pg8C7tD2V//ZmWB4fmx5TQstajd4Y7fWYgL28MKAm7u+BoY7dUCZWhPIeICkuu5uDzaLV8qz7ROAM6jp5W8PbQ==","shasum":"4d28eb727212e010ace2d29b636433528e46c672","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b304a78b.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2Ra/CRA9TVsSAnZWagAAYEwP/3ETdGlmSOGxYdZZcaXd\nZgDzB9/cwGZAFCit1hoA6YQYhmwIeHBxA0+sHSXAeoU4dZ3VHSzMYPgZskFA\nWc2BQc4Us4zw/uxmNsJnlnDruvHZqOx3VctIjl/Lb58AkOOzvvow7CdP4T1b\nUA4VPvjAtdgDkZaDRvA1oDcIe0LP+0NilscHvzgGhUGwBaIWB+htEG/SnUjg\nTZ6RHl2+QktZXn0cu5ZR+4J/nInU6NhojMsDnXUgdogau+/G6a7qiZAXzBVa\n1MECEfwRS8aKcisDiNIi5DcVAH/e+fq9BRFCchA9yHGoYxbqB8/IgLo9WLtt\nTkHy9MrZXNDHk9AzibP1Hey3tb78xXE8MJj7crodGKis22cCI3Hps0f7ocwj\nmXhs3I4KCpKpZ3uW8z6v2sQKTabI5WkaNNH+silcTCmaqIjc8XLUik1kh2DP\nvVXx71z5cQwD6yrVlVMB4UEhTFHygjIyp6MNs62sG4Dn+AGgvG+UMVO1QiIQ\ntcXzpjav8C7LiX9le4wfs5YNxhNICb816JDL2k5gSz8+BComC/AZ+ekoDxSq\n04pwY1N1yM1/GT0DQqu7xRIUA4KnFTp+u3w7rQJe4bs2F1JI16JPim/excvr\nNRJl9iEblyFkkrPRmx/Ndc/KVQSNzdCIwXJ1pD8ClJ44lYnjT4iCV4SFv92o\nlrl4\r\n=g4Ma\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGxTilBm7V5Lf37TdX/29aJmgE/1pyjTiLk0UBWN1gwAIgCqD7PuJucaVmfL2LADH8gzjpjuEDQpZCa6kRAu4rn0A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b304a78b.0_1608062654693_0.6415854090607584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.777c5fa4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-ripple":"0.21.0-canary.777c5fa4.0","@material/radio":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.9244508bd.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-J+iQOBgILMd+igeucHe7lFt8o+JiLUtKzuqxMl3v79SZ85sLgxcsuBoIwgkeXanWlTlsytqypjwVOL6HRKozjA==","shasum":"2155e0d9c6ab8c8c1e905252c735570aa1c977df","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.777c5fa4.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oIACRA9TVsSAnZWagAAlTYP+gPqt0iT7YBSrFmGNa0g\nK8a12o22ctYc0SwwO8ldJwcvG/9VXsIZhUlInZJMsK91Mjk26ykU6vTrrCPe\n8yFgP/X7zbQiELbUqNX2/kkJxleGabGuKXYQS/HuaRWXxE3VkZDZLwGXbaHg\n76YippfL3RhQ0zINKYLzaxveIGg00UQIw8z58rXYff9nYRmccZNgP99GDPnX\nWr4VQlI2g6O8LFHqDM68OZNi8mGfDmEjE3ujc+S4bssxfdN3rbzYqFpBweKi\nasEfHmPkM8FrTb4s4D5p3jQShz4ZcS3SVZFZIR7zFHDXecH26wUxLsbJ2gZk\nTqHi/e0uS6ijw10KXX1bi9HPankdXkx6Xe/N+I/xNsT3yFd6zJ9wG4gY3B9w\n05J+m7w44hRu0JhLcfTP6PADjTZiMkowe6RNFLV1q8wS4zTMGkhKvcvHKsjf\nvF9OJg6SShkpnq9PCoFEb9fYk9wX+Tp5Dbnqau665Z5SXWQRYDbrvOU/2bFx\nD8t7E+rug79+0sJ3jGO9d6ha/9btwkJmKK+EMoR02FGOx+YKzuvdTuwzZt5Z\nDoIRZT9BqRCpapUqSdxL/1/M3H603kEuy0yU09nv7qTrc1jmbz5h1OOQ3ves\nBS+acc7SwtNIGCIh8a8654Z07w8HOnEJT/4kC5dSsx3X+H4XTsjOhgvEBY52\n3HUz\r\n=L3ga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDi6NUrTUZHSUwTcZgTuD8ElJQU2hDTq/1jF57FAwzFBAiEAvsyfNQWzAvQfr/wbc/4dYyDh8vwx2/FkwWC391sFswU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.777c5fa4.0_1608155648366_0.6254064722069541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.635c7996.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-ripple":"0.21.0-canary.635c7996.0","@material/radio":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BJ1QYd1PfUlrlEYAvAFtViktLhXqB0zJu/JJkwTf5k/3EBadc7FINDgdQNDkpsFAfnod4t8wt3x+GvwwoNL6WA==","shasum":"1decfe3037e6af1226206915d2a7392c7f9b9898","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.635c7996.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pwCRA9TVsSAnZWagAA9gAQAJYd4THBnNCqNxSTby+X\nQmIn39feFWiHEwATfk3+ia3+hfNb4NnxeI3EuRS14X+M56YKxuSn+pkZFqxC\nKLjmdOrpvQWiNWtJkXywQjVIM/IaDH8+kKRvBr31+vkg86/lbSZ5bEMvGfR2\nunnxKwQn7uyN2+ljqtPQkCalYQRHKC+Cfpoob++j+8YWOwj5y1NGSkXfuYgh\niEsA0G6SdMDTIq5N5JncXy+AVvb+xUth4GG4O5XgdVGY+gwQFkitPRxs1zxl\nwPqTCPZamysZi0PNiIFOJSbEXKF5wZ6jjNOQWrxstBGdUVjGfjN8jcvtesuH\neVxzJjxa44ybV/xRX5RqM6pRleCB8kUpxuHg9NvEw+kxHIjaIuEIHVmS6hmd\nj0+rE+hVhga4gYxj7UW3l/jC4OHmTnUGXqOCb2KYG2eUAsSIish+8DbBi3M9\nXlIoRaA1FSUdYAeV/WyI/0yPgC34/KjfDK+wYeS06g98gmWRD4O1Fb8hmwhK\nqUZFABq83s/HJzTfn/nptMMCb4LrYrFatd6myN7tvNk/1LaAs1sS7esafIUr\neFP9szEJGD9X08UDWcj1uUgsLIatgAYxGlLrV2L0PKOusvSsNd23FiH5CLV6\nnS8SWwO9gkKxBmVT2st00X20aAX1LmiDKCny+Eua38ds/N9r/ukqnn8wW8Lg\nf0Gu\r\n=v1BM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFSmSLca9rQtRX5HnlYAOzynlWPShwjCHmJ9CV6gOGBAiAt/XmkTbfSfRNOAbG7X7JTluxybdjGoLt4AXNATYkgzA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.635c7996.0_1608247919763_0.9847354580216139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.20b0045f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-ripple":"0.21.0-canary.20b0045f.0","@material/radio":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VB5h4YOq5rqGEwy8M/gW3KvjuuNp+0POVcYRB9UTvZbGCi/h3GvZBv6YWdW+uEZXZP+/8t26usfRg1tjzJKmRQ==","shasum":"9f8bb2946e5e0ea3958fe2000f4317a97a91b778","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.20b0045f.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5yCRA9TVsSAnZWagAANtgP/jJXsE+H2wwy0857L/ui\n9IHKzCTfNpQBEJ9fPml1KLHuSNyvI7K7m/jJiEDzsoldF8Jku/aqgnj4VF1V\naYoIVs391bAzB4un/H6sxW1Nah6xtAb4z8hB63dpVWlkwnFj4Pki3Gt3NZLz\nTMJIFoZUOf7mBwAlGh4IO5fX9FPV6E5Ue8FsmHoXNcbwM7lAD0ZY8g8DJ46T\nDnSjBkQ8J17A+7Aj9lla6VudNqGDsRmSqafS+fEuhT074KZhX+NSl6LYJHNx\nErHhg37jj1prmS70XsOuYb1TabaHWpZKFolyiV/RAA3ChER3H5KG0Wq4jNso\nWzKZjsdAIuITh2BBEOypY7nzHVSXQrOXDg7wT4FsH/73fQhsGC6iT58P/Qjh\nWirJkc0zAoFT7B//ja3N5qO3wrr23P+A4ECQk2aU4osKea2aU9nmr6aoPFi9\nwZUsGWvYEwkDFgO/jO3w9EParc7Bvkyti6Etq0KKSwPE0o2PPegQHRXldYhx\nQFIbs9GEaHM+g7B/O45AuLAiq2q/9kTrLDogNAuZ2iazKEFJsyX42QnLhJMP\nWk60EsgofQSWrK7cocncAAjlAbxaH1IpKnfD6bHvTwbe8rddfBuNo5c87Qsb\n+NjSIs7OI4dsOMLPtgSD611G8Gud+BQPjdHB5ZitPhIsENivry69s4OLLTWa\noJ8P\r\n=XEAa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1cPhIZwrMtQze6ReQrSHxDU4Y3IuE91DF3P+1phU0jgIhAO644Pj73GKPCuZqqB6spfGe0i08aqjUelQvgIHiCRBE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.20b0045f.0_1608248945949_0.9096197982524836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.41f77000.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-ripple":"0.21.0-canary.41f77000.0","@material/radio":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Pw1YMKb8TOi5VI9/0rAb6k8FCVVo7W6K9doIV3xOuo/8AiR4+BrSU6kk4RXwhd3ycfX31aJUci9BBft/UCgDjA==","shasum":"f558671ca633f1acd920ab0496f1d11da7ccf233","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.41f77000.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lJCRA9TVsSAnZWagAAQ7gP/235GiiyuPpZwE7A/dzC\nI7iiCTDfEN5OWZ/C8QHOJBDtUZcOLXsQuS3lt62oAi4Gn3WTEWnuz+mZA5ql\nnIcxJZFCTDyHW5qU8RK6xjSVEAwOkDcHRrzBof/uph8mgJQge5/mNbZL/HMf\nWIonjKkuldGS8KhpnHiHiYEHXuYR+HxN6K+AAkUd6r4UHqclXr057DYIzLiG\n7O5liYyXq8P2Dk9XLCWPbsINxwjGZgEnNFpR/TnETh64J3q4heFq4Ryb6r2b\n/P6yEIE0ggcz1zJUNmg25qqv/16ccF4/Lm0Fizz5T7SdJtTITccQzYCqeB6B\nE21vKWDjBfVAqZexAhxR2XqLjvtfmeAJBT3RFhyA9MP0F0nA4vX3QIAXNgsr\neG0GEhPSDzdFmfL/b8upCGGyxsx0ZUiqeJNY1qvNi/518twJCuVg3KpYolxk\nL5FwVSM60eSCp/cTfy/vJG+xow4Ng6LOjqnqxxMgsKIBdNnrEtaD2nZeovrG\nktbbYewn3UMMJ7bLXQz3KCmvlw2LZz32EY0bFsuZWIrhtBRUCVLn5ZbhBxwF\ne/BllaQcdHnSHVZWLy+JjV1uvlZBzK3adQ5wSBBmkSQIh6GaGLPrBWgMFLV1\nX6ELoPaPx3U17Q00C4H5IYZEUrebjSnlX0Hkyjab3KjwnxGH5FRVjur+CIDL\nhyyK\r\n=tqGB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZkCVM1ZBMX/RHvZaJJeRtmemxQ25H0XPeFDfHbOmmOAiAhjqX4UW1kMIooL+CqqYazBtcuQS76LEvUsJ6oLKeHTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.41f77000.0_1608251720688_0.18884883469990843"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.afe4079a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-ripple":"0.21.0-canary.afe4079a.0","@material/radio":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=9.0.0-canary.30fdfd06e.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hSvbflnc6U23vw9o+WhsZtXM0N0qwRrltjPoA5VX0AH5GQIr9hEkEfvMrSe6Z1pbk7CDKbGGmZCNQUV23NDHwg==","shasum":"912bdeec16684d451fd3d7de7133fc0ea3475c92","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.afe4079a.0.tgz","fileCount":18,"unpackedSize":100023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9uCRA9TVsSAnZWagAAbkkQAI5PMuNwGgYcBmMfe6GT\nolDa8TDIRlbIxLsyakxK5nT+gzpVl/djiAYTdCUxg9uZjn+StvmPFxnp5jY+\nCsxVKSiqvF2m8AttKIklT5eIRJWBboE91A/NsklEl+7f87kIa4TDYr5dsLMB\n3c0R/1UHJjaTcfj8W48As5PZgOuexIa8tHEFyDkTN9GM5BKxPQPPAv/Avt+z\nbWHTb58/7A0HPsgw9Z1Oo9MLOoX0WrAtJvbrSjyTJOQnToyaHPSqMCgbNMdv\nk1I8ehRA8P18M/DJtx+4YZHVCWeC1llpXz9Q2mXSyBFy98Rbly6cKEP3O8uI\nO+4PE4rgz3aNsJRGCp7B2Br6rE6PDJbscnBVXVc+fC5GB/mXh60aWfmeQTrJ\n47uONgZEjmGHhop5dBwcfmhD9yGzh/YaF/RUj7dOgfoz82aiMamD1X3MW+xB\nQFc0B1oSZwVcs77wbHji/fh4TAaF4wnmQ9jnY5mja50RsWbyqnZENvBsz1aQ\ncYDPVVJbRKaX1Yo3r7AoqCg/CGjQWQq471050Rahv7KIDT5Ct+eu5lE3dFg9\n3YR6010oO9tOBIf+1tfYte+hqf7UQM9L8GYJswufxBbeCYl9fKccpJCyxHEV\nkdehB7kIxJMLSHFv//236lR2cqhwpRqphP0BWzPVw4YwIlNTlNUwkiYrSh5u\nAOYo\r\n=YobW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhK0mDZcjs1lS7GYbMh1wD7zJwPDUD8KB1CUil7Wi4JAiAI2ezdwJVKnEi4hWuzms4nsrAsIFLAKLJuvd7CPPpR+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-radio_0.21.0-canary.afe4079a.0_1608658797991_0.7118390380150246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.407ef8f9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-ripple":"0.21.0-canary.407ef8f9.0","@material/radio":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.671d72d95.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FWyasnNJlGk5ef8H1iBCHDUbSZqYzod9HDnwvcl/U9ujz8H2F++/mP4gXbZaWoZgS8dfbl2iaw1nT/8i3Pg85w==","shasum":"fd6a29d7dca6a40d874006c75668f39e42ca5c5a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.407ef8f9.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcaCRA9TVsSAnZWagAAT1AP/RfxlMl/dx361Twk8Wca\ndNS/QoTOeFbnjcBPNzDKq86ZcBukpw7JPbvLxKhBviOxZgMnL4nOzeIUQzzb\na6A96DUjx6q/o5DCKRB+UN+0pNufRcnWQz9veFWWGPTadKnYXcE1Q2dazQPI\n7ZmE9HWG1kZ3bjfwgbMNfSA2zaeH799hNV28taeWYNBR4Bjctxqd1oU1AUus\nzyNmyHp/SYpflC5NLDi3m/8k4sM82CaQzuRpHMMfzPT2PWp/H3NltElNSJo2\nzVugpVsTgvuOYrtbLnCQJpn4r/PokD1U1h+75EgLxaFenzoQUmXlPhXhvvg/\n5B0g6iKgwCMMeRjjqAFrP2qAoKmEGRz83E4xq0kPJPAwvxmKoFuu3Mi0P+/p\nG8gymx9n+DRy5uMb4XRV7IUgth3kyoa/inkKI3+Gn1OpcANpZ+YhVQ/YkHs6\nr4QqrXrIBhg+b3csywlEcOUPEL24M2tcnRwy95IcUP56ToIbQquXPaFdhXA5\nI7ec3ZpipJ3YZQJ+ESQyuD8Rtq6aXI3vLBtu6mTBWra+orgH1vxl2W7vsRBa\nPYw1I9BhocSermKt12kX9KVTl1NapKYuxa2Or/QMAQ3OQADuprAlUjWVZTPd\n1hrHnVxBVmvRHRYrkpjvm584MjD3wbgzLVV8xLnxXt58CC4X8C7P/4ei52EC\nMoZV\r\n=eiCp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3rsSiQ1BFGEvmPXfjSOpkylwGttO/fhrRZZYt7UbhpAiEAoKUB7t5xrToNkxVOhFQGh/yOo1I3l40xF2VScqHF0Bc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.407ef8f9.0_1609369370400_0.21746318787693575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.2e26e137.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-ripple":"0.21.0-canary.2e26e137.0","@material/radio":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.365c69360.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7Cca8G+5wjCybVZYcWFQq1KNrhTQPClkojqtopOmQjEajrOlg3JYvlH3BAlHyR/P2ajgmf7tiYCfS1WDkC4Dog==","shasum":"5e7db30df34fc6d442758a38d581f0ca2a3eaebf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.2e26e137.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTLCRA9TVsSAnZWagAAzuQP/i/F7L1xNt/k6F3nTtEq\nnGnKADLykIR6W6XcI7n8J6Jzt9smu2awbN4Fj3XP2vss7cLn++uGw05excDB\nVHhzl/dKtWxp80/B/yVYleNY1/v+WVoIM2z5V4YbDHlITFJwhkTLlqlr3JBz\nhaTINQTYjFwDev5H1SQqO3IX4iKZNxeqzar1bHCbrTn5ro5dAhdTiQPPThY4\nKTqPl89RULirQcvyETJ3LZmMqQQvYJiyMArGJ4bbDMXvj30qjFqa6ZSuZx9S\nipt5Lzt21HS7y9c3Kt4R+gFWwEaTVZzo4TO/VVeo79lepeAuT2UGtlVPjn+h\ndYYQ7QoHCSvdwJ0iXF73WwVYPWWeijJJ6uAHUw93HZaL/jzE4OrEek6KXjfG\nAOqYu6Tn+pfxhgtbpJiKN8fHgv0vPC2JSnr67KYqHgejJnFgdA/lwdvRqsTG\nwK8ifPmsee+TSu7V5sjqAObfnnNjdMBzvZzMZ6Cf6tVMy/BRn/ImgIaM/NxQ\n2gRy73lqblEANBXvsZtOktVMwXb4nhXatZatq3qaFRYodvwM6t4K3wY9eSPl\ncedNG9sEM5julcYJS9drM/racJPYgF6LIcaOALkj2gAnMMDXDEpOaBWzujoK\nydYPIvohS9PAOTehA7ldbrWxPqFbrCa9qCK8K0UN7w9uDclhRkgEXM9qdx4/\ndnqq\r\n=IoYE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZ6R2DIJOghalmpiWM/Sw2BbkUfI1yXHlRenbtLaWrHAiAI62PL4hN09yOIr17q3DssvX9dxh3mpPZzml9i7a8iFA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.2e26e137.0_1609872587451_0.4257572964520584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.9009f6c1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-ripple":"0.21.0-canary.9009f6c1.0","@material/radio":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.abdd10065.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3aLMuGaDohnEg8zgyDFcIadI+Etr4Afoy2s6Y71aoMfo4uZFb+Bvd64PC8vd23rRvRsXjzHZWNMiHQABGqngDg==","shasum":"63ca2a076c19daf57a30d26f961dbf86d95b726e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.9009f6c1.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Lh2CRA9TVsSAnZWagAACuAP/0gSeDP+ZKe6/0Fwd2lz\n/uTeDEICrdfjizVRj/rpHPofOBaouLvT9Xbeuo0K4yiyceYQQt8l67HDKA2R\nfU37JMu57lKf2cEr/c7D9yGkBe+q9XBYlZn5kIBMZUPeX5zsp2PSH2WJyOcB\nxaiF3b5TKFKRdXc0TLMC78i+MDKELNHHarXCw2kqM9mB55rEEdBF0skUn1LE\nACqJF7eRwb8xSenf2ZlKpbp4B5JVcaqw//iUf3Y9bl2IuX5lmuKcV1locJ5R\ngPsbVigZQgTjCqTT5glG62HovUK6gaEDsUqTsYYFc7hbb2glvrByHN39GWcg\n7/vFoSrtSGJpw+q8XbrSRSpC17Gijysahe+M+marvKPn+dQsgv758gnJ99vK\n3Nl6VhHXJe+yZMA+aXedWR1elpX+ewXys9YNSaC/Y41sUYrAntVKoGhjmTuT\n8oUc+IzgOdrxtHFe3YJFQfbajbz/RZGDK7OhJa/CT83bOKIHO9qcgM610TqE\nYAXc/gEAySs7Eb0yD4EpH5vTSa1toHRyZ7/roNWy7oWxwCVkCMhNSbLJavuZ\ni0cMBHRXOXST7ZuC8xY+7UvpWDmvTya69oRVMjEA5v4OpFCJ0fDZZnhS+eP/\na5xfunsXHntd8Ywv33GNe3whH6aw5rmUfttdNbWN8XeGlO9+F7hRCK2wJ4wS\n+0v9\r\n=wMzA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDkvKgVVShWLAugATexrdPUeOdv/DP18mDqjfqswa9lAiEA7bRftZ+/lzuOE5JaNhvDkk74O8xauMmaRrGOQalTNmU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.9009f6c1.0_1610135669870_0.7627032997652319"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.ee99b646.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-ripple":"0.21.0-canary.ee99b646.0","@material/radio":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b8a1a58e4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YhLRlv5PSoqaTznOq6dfINq6JdcF6DFIwZLdbHp66W1gSNWIenvG8lXf96c0EGlHPUCasvwMv877Cfm6YDTEIQ==","shasum":"1cf7c614f31504e9e6d5dfd8c67c06607163b646","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.ee99b646.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpkCRA9TVsSAnZWagAABpwQAJGOxr62KC/94Kkh8miW\n0dI+m2Un3cmX0NNBhAslz6SxLElWhU6yGwdpjH6N8Puhv4MXX5PxYsf1YeEo\nhN0tX+fSvA7shd8TTDJdFYk+MsDGjAA124Tdz4wWFV4VeqhxuERr3ugQ6Hm1\nXCUw9d4Zl6HnBA5ge6yYP8myivk1R09AfcXysYE5Zt53p8OxM5oKMHbkXcHj\ntNgMGXeT/oJjuQnVFdUsmh2KI3x+jkcy0pAPRiPbpiupICZyXPIX9IvUeThH\nUz40nElg8fdqRKxDigKV6w1CtWBTTIuXRmS8Bc9XI1bZsU4mIfVdH2npHAmQ\nSHPrxncs0bGubO5ept64gq8vj7jGOCIZIpk+8sXEF2wXZUHrHpP+09JAanpt\n6eUHDGGmvDoIuUAt1PswBaBOTrP53TWogzCPt8oTeYB625qk4wwaTUgoM693\nbUe0dkaudYpBR3EjWPFTYDS7GTq5NzwsOdRqKQZUdF+gm62XoMoBcare7G3j\n1vxq3FhNwwzK507M2Sxvk6ioOikmJtSELRPkqlMFuorPlSTNi7o6GY0RlngR\no+8gjlwG+RaoH6EtbzMUnGZE8MvYUErVRZHo7LGxjuSreyb0fk8VLJY6CEJ2\n1M4ierd6ot8QgT92DXCaNV0UfnXLQ5ixL5MDrM9bkRd12zRB/fmEZ45rw/96\n2BlF\r\n=nl1M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRQtFmTwb9Eg6pth5gV0oF14YLf6H86EQIw5b4GMb7GwIgRXZCZwhiL8eVW724F22Nj7mj6X1bh+SwBMid9dHY9YI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.ee99b646.0_1610406500088_0.6947375246681928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.740ed33b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-ripple":"0.21.0-canary.740ed33b.0","@material/radio":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UTKpeGQHN/b6ng8fTPxEI/A8TvZJbhkvXxO4OZ5b/bz8AOtWRCZQ5yzyyt2YdgansKRG7mf+5tmuc7p/gZubeQ==","shasum":"a236391b1461bf4b065ec6f0bdcea7b0a6ced2ea","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.740ed33b.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSgCRA9TVsSAnZWagAAMNkP/1/ao049wcNrrIqVClpy\nN6/h2zm4qTD1/TwQy6W/zzmyqYbc+SIyB1nsLHVyeo2JPa3x/odqoUKEfc1X\nC1hgKhUER8oPR+CHVTkamKRyqMdmrUxN0GqvGM10tX/AR7tkzI8e+a96MX4F\nKAA4cnqHWWByJ7RKkBEWi79/v2O+re/0Kooml4auLyPb+0Tz1ENil8HtQn4t\noCrz2Ma6sFZYRFex42d5xS9zEJxW5AyrwCFvXaepColC7fGNApFAf4BQjfV+\ndTiBXA8IAa8TXBc5amgKSMPDC5Pr7s4ev78uQhzNpIf0wEBTYuhjDA6fGdaV\ntZDfKfT3ZBDqBdUclxTtSzLDhh6p4fOfQp0d0FE+nPyk31aLER/8rDCK5CEi\nnRTSHe5M0JduVkq1Sxa2Plo0b4hndJvbwl7KrpZFZUJszINGwGg06YU3bx6/\nVsFYMTXIapedDuXz7yKFVHfFkA+LzdkZfcp2FqLMVQ9ZY7HjPTGnGtoqg+WO\n1EcOcin/pMWh181bpaMC/oaAxRtXwlDvkVAl6JNbmUk5a6RZ95pZz2xAkcxz\nWyrC+buCb6H6OkOZQA0iB/yqR3TBwiRWB3yluO5ZvAi9pSRAoqzpdQyYfGRi\n98FHPC/oYlJOZk+TwKNiNsFzI4sS3LNI096sy9XvvTtwxm1Fg9ZLeSukOLvV\nRxUI\r\n=JHEi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEt6yu1nMUDD7bNmDJh0t92TxkQoely+OyN7sljUOQKpAiB6GzbIp2+zh/+C9GAlohcICHJRMuHQyM4c7+p5C433cw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.740ed33b.0_1610474656389_0.5826697167140631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.c5c541b1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-ripple":"0.21.0-canary.c5c541b1.0","@material/radio":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UFgNsO6wSDTSjneW2rJ1L2yrUik1PKx1a8N1ZQuXdQgXNiWGue0+cuIdNJoqjgjO8xD4W+SfXuv44yCazb4zOg==","shasum":"1cd0bc973ce8dac75dcc655f965526d23859288c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.c5c541b1.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5TCRA9TVsSAnZWagAAJ1YQAIdiz4CE03qRi/iGS0MT\nCwEQ3UFN4mipDHw4lECyHwOSQslxAqaUT3DIJKSnJ69CPAiahSWXQ9c6VFWG\nwDBnjNgO+mqCl8947kgmSFVV3B11ULA33ypq4rISOdG49E22TIktbiuyfeSS\nOZUzkzk/r/OO71mrVzlRADVLoiGaQomAK7hsfpp37tdqyFjOeSlB1qCqcBzo\nbMX89DmeI/QOlkow/xqAqHv2crO0os3YO/Hq97505yGp6BtqGJEqvrGXNjZb\nKIgG74bNK3RpykrW6obStNAeo/OiMap9hQq9+fehXW8j7I/A6r3SlPXALgiq\nJDy6eHKd/bNTCe6V+AxLFa7/WyiAaU1cMPCGYQgSQntKyW/MmVnf/W44+nX9\nEW0YUnyuZK+dBKb4Ry0JzYZUdjfyGnaSHYKfVRN8uaz08HT4xwUi1Yy5fI1v\n/9F37qiVA+GQrgk8C570kbQtmF9GpwAXwZ4LeSU+IKhKoESdyDdl8sCbxjpA\nugTe0+YoDERPA/XMu9X0lHjZj6R+y5MaZB4Xm4curmQZYpXwKM0onp/K2u29\ncdMJ5UKFuiAJJzfw/25QovwyloA+apTazJj2DRyo72GW5mM4gHCL7MmlOjGh\nRcNxG5tOHEr8P11QS1SfBCxLitCZHp1KfOHbnw2HGUjrB5GImEJ6bs1eCxHu\nimxm\r\n=j72X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfplDqKKi8H5RSaWo+ZOiji2SU/IX+f3AhpQmDqVITsgIhAN6ADg4JovVrRsvo2QoTdiClUix6LvvdMLg0lBsdDqeU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.c5c541b1.0_1610477139546_0.60670254363335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.06fe9d90.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-ripple":"0.21.0-canary.06fe9d90.0","@material/radio":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mFhizJzyymDv82tSgLt5pwfSA85q8E7mEIXYx2YRW4hGjs11OYp6wif1abIFFLBdpiAZ3bNT9U75BnYOv0sg/Q==","shasum":"d7377c0a1ae3368dd5a79edeaf5070072c51b01a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.06fe9d90.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gyvCRA9TVsSAnZWagAAc7EQAJ9UBz4/88liu6aqPJ8c\nJX6FVL5l7g8dyuHHGiAMjpRYMFtDvoKUahRkh12+wTOWOEIj0woT/pgxC7C5\nCZWBHf2aCqTvPBYbzjkekGhgVu5T1ZVkj3veaWpqLZfmjYcIlho+orLDDZJz\nkMxNCf58u2uhF2yjRtV+4EMe6ZuW1Nlx/vOZo9iBMvdvJ12JFF81UbWDpBHJ\natopoE2DEukZ4T9unkZ+zWlHTBW8RbudrZw0Vg9cfSr2HffhOOIRZsY4bYBe\nW2/Zr01p7zT7p4sxcCVTnM3wZDRA72Q0GzkbVTftSeLqDOtLQD5XIS/J4gJt\nrhwSQYJfaihZj6wu6/qsZsLZ63OjAElVg6LLTNnWTtNuEe0xeWtS8+34qG0k\n7r6VUMn/W/57v8zkg6/cQLRmH9YZ5y3SG6QPYla24t7lAyQRZCmggucR8nsk\nR+u4sg0zDRgDeT8Azt863utH1EvrOGBvZ2AKzfq/dWQ7nXgFLDnekQ2AsPwc\na8PTwu2MAxWEHPk/T3/Fu6aRWc52htPMPhkBH5eWUzZgptzO0VVpB6fN52Ee\nbVWTyx/i86mse1gsfC8ci5qCDF5Maiblfy/RybHmNgvSjUpXog0j1T9HZfx9\nU4wo0G+wBuIvToNs9n/yABgU0EGVEGQIl1yTKpxpUVf2YZ4kowULmE2ThIst\n3x/I\r\n=54AZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmT7a/LaofknTdCFwfCRtKSqtY6vS29Fon2D9LUTPxGgIhALcesfGmb06NrMX5AvDqES63YMRhZjAmdsE7HP4QAsUv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.06fe9d90.0_1610484910602_0.9156047445608448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.269eed01.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-ripple":"0.21.0-canary.269eed01.0","@material/radio":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6mod/LZ8bGU+PF5EY34M39MEjn1WEfA7Qz0WlibtEAaNFVyBNkgPE1VQaHDCK4DKuOZaahAeV+EPTPMyr6EZgA==","shasum":"3a6d64bc06e484e4531c1c72e70f5fc2c0d97085","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.269eed01.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2n0CRA9TVsSAnZWagAA3LgP/ik2EcRQxBtDt6w/ymVM\nfSwL8LdUqDfnQsbIAnlhzpmgf4JEKEGbzSFsA3rR/zZyM5xI46/xg+u+J8RJ\n9pLBObBk3Kg/MT/ED63zZ/mulghmylg/t7VZq5xjBwuB/mB4c8uChLsptIBj\nOOLBktL6TzKh/m+KkZw5Lmaf4MDfgRSjWVcrHsEDZA0NlSY4UnMSmfs6E7Xj\nTUQr7EZESzZrnaedIMo83aJ4k8/gwohyCquNhBObXOKr+Azyk+fxjgQdRl7C\n8Na2AUpdFYa3wygKkCf1t2i98WhsWKg3CPI2AF9VjD5p7tiCohXAp50D3bcx\nwpHOkf4LNXeQfHTvTIAK1xYOaWG+ecIPtj5Agi+5DLyWf3E4zsVetcKrLjQa\nqS5pgCaGyf+bwxLzA/VtvyR7wRbxeS1PuGjosh2eElwlo5Bm4NauITLU/CQc\npkWsxr+N2bADGbNBIYuLFTumm9dRm8p3yPzaDLG6/6OxdjkWcykChduFh9WB\njSWT3CWF1Q+L2qf1ZotgL58rO02rfvo9T4h5yVDUPKZeNTpV2FrGCiDaQG9r\ne5eczfTds0CKVqc4fWGX0vQ+80v89/1tlRzUTYRi6Ylbl0BdVF2YUFnUG3O9\ndR7outY2cj28kOcrCQVSelD3k1jIu9hgYqQx3lGFTgp2wD3aWcc+9m0dNF7G\nqLhK\r\n=e3XH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqWb9OPn8RJTjR+sscZgLBXX+HTlfOsViBES+hNNTq9AiEA/rqLGtQ4EaWbhgh1V2HlcVLAgZn4SgnY66NsliWd4LQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.269eed01.0_1610574324153_0.0953756948837432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.8c075f35.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-ripple":"0.21.0-canary.8c075f35.0","@material/radio":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hPvNnAR9aJzkeeUwaH0SV18IBChkl2g6T/IkbhnGg3tV5hP21BtFoFcNg5K2+5+ek9uyL9f8SoXoC3OepEATdA==","shasum":"da19acc74c189e4005b664a35dd38fb9b8ca3398","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.8c075f35.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30kCRA9TVsSAnZWagAAwTAP/ifRXmXYh2cXdhQ6KO8p\nJN0mCvX1muRGysi0IPaz0JWRe//4eNSthSCnYSKiMBllHTa3QoW6KVR0wpf/\nyYiJT2AsRsebv4oTiOcgxazXb/kCXxFmX44oEfW6wh2cnf25MBU+duUFgJQg\nmbZLWF3dLrDqKF07KdKED5/aYO+ejieb4j9ltmcknuRUiVp3LASAAJQ7y4d5\nCnsv42o2U2s5b/hRLRjrFL8btHrfAig/EVNZLCUHgOlX8FeBkw4r+an3Hx5i\nPmbnxxdhCfEtPYh/Xe5JglYDo6TzOAj864llQ4qykZ1lP8v6opFpvf5meBXg\nnhPJmYcDpBT+ZWRKk6aU+0Tv1PK6R1vYZm+hagNXnfMJXVbZZdNyXGqTUSOZ\nL/+kw25HyVJHLM1E/NnUNubsL3dblatXMwq2KV8nr7KJPX//vCYx7ksnUDfE\n+F2JgsceyxHn7FcZCz2Wj1sLdJEaIKwd2bxczUni9ElNdPI0/96u4VAcszaR\nEKjZQmSS+ZMGSsxA4jUfCRMKT5MZQMRBiOp/fP4UJuYHgdYK1Hv7iUbF8Opa\naMUfYCdnetsKKdJbiSEy1U0WryUfCSvpHJNqiSmRSR6x3eCdgOYhlIKHTT/j\neS7dupdRb2Szxbgq1HTPiCY+kIRydemGj56Nyp1FFJ0M1xLYFKbthY58l1GE\n4vcw\r\n=wBrg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd/bCix7LbiZZFU/1bLun+jL8cx8UbFt1s4IGq0vfnSwIhAI3k34OOuQYQMuqRS8EDeFy2Y7NO7h7zFHaRNNcLFriX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.8c075f35.0_1610579236159_0.9647818515386366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.3cda381b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-ripple":"0.21.0-canary.3cda381b.0","@material/radio":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.7584267ff.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uL3EnajGUwnhhde2J6wz1+OlWBd0rkJ8xBWyLOfmu3EoS4jbNIu4IvA/MSTW8RFXfKgotgd1zoDfjyV53BojsQ==","shasum":"76e0af36568509ff133f839ee3c9ef02572b9330","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.3cda381b.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qbCRA9TVsSAnZWagAAaucP/A95d4FNwHJRCeAo9zIa\nEIYEV/UT/uwZ26uJJTWuK7Ivz+F47awx9+MQFVAIaLH7bVpdgS5XG6Qs3v3D\n9o/i0Ocn9U2oOUbCwNnD1ekm2sSvgYjsmjnx2V9tpVBHQ0HlG0IWxYE2tTC4\nJfYq6RVkFC8l65iAbVDfBU0gtaHs/+Yy4iTS6nK+wSZaFq2uvOdOodsAHzc1\n/liSNyQ7ntOmAe2htChWCGQAbO/CqYee1VUQ6/TWVv5+LoIQqX/wcutzMykV\nRfpRvFKxIu1gcn2Tr0dh+6t7M0U/0fp8kZTL4zWUTWUVtmIMEkYc3S6LAJxp\nPeu95pggUcQijJiGd7FMdsCFxNq9+cw/Dg6vFiq+0+cUnA+2cMx21y8WfDlI\n6usuhjJ/tK2bONHnHjJ8jOOQFdHJNOa3Fk+44/XhQRDFKvwaCjZns7Mu38S3\nN/YOQHubSUGJg+Rms9Yi8c0kg8SNp7UHH8MJ0ez1nY1cTaAgWVKskrT2Wgw1\nYfnoNZ4vXv/Mlqy1KUq9tX8izIlu3gQZW0epswwxBLI3XAMxloXbWm07XhWt\nGWoVciBUxe/YoKpx6wfSDpUJvGG1JfPBXAn83jwRAKlkps4a1QtRC4qC+hX5\n7JtRawlhP4dfMXyQfnqPSfE8013igsqu5aj9zFZ+KfyvsDQzhrCWWfDwfzn3\nhDWd\r\n=zwMP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcDJ87K+7JKLPt0Fl8XgcFEiyf2m+eagvEOT94P/DDeAIhALj+6YxUGYHhxQ/iY95xn3wNPMp1kE+mP88ACE9gBEUy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.3cda381b.0_1610582682846_0.5809515931757394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.bc113605.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-ripple":"0.21.0-canary.bc113605.0","@material/radio":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.772cc1068.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aGSDAl55TuRBO22MxGVDQXBn7+47g/8aACuBl2LzjNbDrzzYiwMGj5rr5V6+0kC3DoVinmS+1HkZ4OPAFYxJuQ==","shasum":"2c7b7780cccc4b4088edb7e1786a9bd588d12690","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.bc113605.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QrCRA9TVsSAnZWagAANSwQAJZHfXe98w1ei5M2A2kZ\nUOg5Ir6SSoZQ704wTjkl3LfaM9fyLPCxOG/TRuqYGWTujcZ5kn9zM3jrTgfe\n6TnyTM9ewEuuJTcClG26DiCAZFC8GChjpYi1LlBcs3x3AF0DnFlfJN/PMh7s\n1cNDwmZq0sssomMvu8tlef/Buoszq9zFA8HY8DwPpeayb285RwUv3KWpNNXO\nmN7EtV1JoTQ4vnyxzAc3vIc0aqzDpi9oKsglPWfXDJH7d7V1Zd2jsJr3zmsy\ne12yQZTOtRBc+L1HbcxbSA9fDqqO1Mk7jq9AHh0W470vaBKmIbRrWhNRxmc1\n4ZOGBLOxxXjMJaq/XkqHB1s9AONfIR50ppcYrnwYaXsnc8kM++Bvpz9uO9GW\n0yPwPgZh9a2IbmhWF00lWpuZsHoFsHiMy7VgW2JfvmARxvGjeUhDuyhNp4bj\nV9AWrmw+3KTmjHmyIvYs+gPNS9QghvitZjWwRznU+kQCkBGVn/HJcwxXG87E\ndpARC+KznfbURfDQzOtDHoM+AaFbyyKHp/G1ujIIRSM0jb/7lpyVlptlR2wa\nx7tsyva5z6YHQXt1gsAdW7SAyLq81PWtk0GP2MG2k4XnnWUhYiPsnE8ZfNtj\nzQZUB5bGaZjYMa3ESY5Pi956IwrdQRhD5T28vjFCZSqGONgel+hTC8zAoaQR\nqXfe\r\n=jZSW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTVUC7H0YvZ3JrpSsO5vRcLL3mQTJ9olgVHDr8QhyIPgIhAInoLiKnb6d6ZGUJ7coS1fptd4B7T1z9H3IZRlx3gJgm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.bc113605.0_1610585131510_0.12055432570213842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-ripple":"0.21.0-canary.0c1d6ff9.0","@material/radio":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.772cc1068.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-0nJtHSGV33yv5PHv8jmbNvd3gvi1Zh2eWZA4WbKVmt/4K0x8k4RjYGuI8gEwxK3CnI2H/IcAAV0Mii4kSWZEPQ==","shasum":"0c8a166a27b6171acbd6a34df2164cc25fac8006","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZ2CRA9TVsSAnZWagAA28QP/ifPT0O9YjkbB7KifcW5\nEcfgtsJGME0X199TcAZE+acQG7oKYQxTLcvPK54+mBtfxBgY38ame0ny+l4y\nbb/NgJlEkHPndexKZjAm0C9PjNh4dsLlHeS2w/M/4a52PWqneGjBU37zXqId\nar2EGjQy1r9uo253uPNMJSK3wOV/JwrnQCz5TxqRVL77KobmmqX/71lIaUvx\n5VuEBd27SFEMW0KwfcZJI9c2KrFOiMXyzaKHXfyMFx7QJo1sRgZM7Nbfs5P1\n3cKZFby6DAuuvWSRPXAP5b7Vb/3s9IdO8V1xVQ/9BuUJkWXZRHoX+zDYfkmL\nrtJgxXkFq87u5QfR7qRDasfSmlCKcIl57GNQughJBzvUSSonsCrNfRKa4JmW\nfGhl37r9u8nt7gDDNBF6jZ1z9cZi7lPvENLg1A+bQQeaaxwKldVze+9HHysR\ngL72Nbqvs/0hZ7JZwVLbGNKWc67+6xlkYLY57XIS4A8BZYhH/yX8Fe5EjKzU\nxxtvfSg7/uzX0loeh6MVB9VCpJEu8uPIoeLiy/G10dsOe6uux5Zixv7IktAI\nm9D4qdfAfI5PBnL31wI0GWKW0coIX/TYt8yYq54KJgQP2oA27CO9+PdOxYPI\n9J2ddXtlAVA1vY47EW4DU6IwFYLB6pfA2fhxcKrrZttxV6t6+LjG/0iNKcba\njcvV\r\n=Ny6E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnFbznrd9z0yGdbRrNkxi0XmZ9CJfi3YDgwhgN64apBwIgCBEKKTOynlwQ5CCpvPkbx9vlggaWPNuzxI8U4yx4/UY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.0c1d6ff9.0_1610741365525_0.8906902635302851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b4332e00.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-ripple":"0.21.0-canary.b4332e00.0","@material/radio":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-T1UNRhrbzgZdmechyMHydi6GmPLdRhSzW7YpCfv5hbOgqZIeqyGtnn742W9rTkAx6118hv8MSmxZ5G/Qnja7Jg==","shasum":"b0930dbb4dc47bdcec7ebeefeefdc1e03cb99b7a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b4332e00.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhInCRA9TVsSAnZWagAA/yMQAJIUhGFtM0LDCsw24nKW\nYY2K8m+coj5XhVnWnvX57e/AJaDE23Xqvp3yMGLZZuMVhaRRyxuQipB+52gI\nK3eP9nqMolBzgEE6X4Aue4fO5ooZseBshV59nSfd520a8tqslm7MJWetdJ/w\nqHCM6ak9xDzTu9jKr8TF6YL1p4FwPo49+FaqnAqqEe67TvGZ94miQwbGJOT5\nfx9X8Y/GdxvceG584NlcmU8fMdwzbUq6Z9HDty/pln9W0EH3roFrv3dILjVh\neZyECzjJ5Ef49pZ+raNZZ0zBGPAqRgV4lFdKvWRvg7ndeoTLR0RYPfYuvkCD\nDxIS5YbFi2RxNx/dH694eP5MElH7qgAH4gjXEMlSJrgL2tOSl/PIWN26H4gP\nJugll/YM3D24LQ0gjuzjLl7tTLHH1FXVaqGQjFcxBvwC3+qyKLC2N2eGXePj\nteM39Cibf6iGqd+pr9NFjrey0sBRXlkutRTByIL3Kq/GMae6f8AOyQUb60nl\n7t8Xy/yenswK6EC9tGRxdsDmSDM8/sbQ1UEgdY0gb+8XuaRiYU+MitL9tC5y\nuc0rpd+s/xMGAjL8znfl/3i6wH72h+Xz5rtZdZ6nBuGaUGSBwzx9lECeG3DL\nWrsHfYiMJyvN+g6N/MzeTIXRQUdjMUVE1Eu0mjwdcLk2DDz5++b9ILEeGYeZ\n49c+\r\n=tP+E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHO4xmi3D94z8XqySsOpwYd/xwTSYNZkqJdmEnROu25HAiEAk1Uc/XqYlBElIGZzQeFDXpsCGBywelPDFBFLkFrTymg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b4332e00.0_1610748455317_0.8295143322016418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.2899691d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-ripple":"0.21.0-canary.2899691d.0","@material/radio":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-xC3z6G3L/KdsSUiZUELHFoWgKoHWd0UPO4cb5L/NrWFFQJ8JLzSki/fKhMaLjT+Ww3mrM/M5dxKldTh5yxQkJg==","shasum":"27a877895f8267b0e96a40e3a475712e4753a70a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.2899691d.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkULCRA9TVsSAnZWagAAeyAP/1U2EKmNYhC1KifgVQiQ\nx0ugsduYjGnoudcWpyZtH4TuULRIaHi7p0amGmXK58hyuGgRXE1lRAlFb6of\nwvD3cW8pInn9jFUATfzQ4fGl8ruZDBBVwGRZZQfMfxEH/UL/2qxlLXOb7ibt\nhEv7kBeRGpOkpmk2UKDAUW8dCxi4h5F0YhQLuaecd4fCze3SLBTT9pWcoOD5\nqFJ9ChwqMvMbgEimS6+A7GpkGSaT24DOzNxHhYGzbcDVK+YLaK3Z3wZEsHs7\n93RXl9GkcyTA9aW8rpeda1RGyqIQ8oJ3tLfwpezxrfXRl8VyGE0sQ39ht7Tq\nDbv/f02vLeU9mleXiKnIZxGkOvVYkK2ZujyoeAmyH8THohwWZ7OBm2w57KL7\nfN3W7KPZ26drgVdPJFDbcpnpZgRafnQhNkxd/w/PBwo+4+kCjIiw+7/beSYd\nP96+UeBZqqXVFaHPTWaVzBQKW904be5lzDE92VA5fVfErfTYchp8Vywxqrdj\nVhQoY7HJV9PcTuZT4pCNg+l9mLFuvwK+GBxggEJQHhVkyv7x/kPXu4fSZUQe\navwzNR3ciG92XPFAGXWUVVbWb02QkXcYMGNpmD4Hs4htmrGIenZzBTPYMJ78\n6w8dicxxicVKlSRL0p4qV6yge+TuWQhHen0kb3adNKruzefephGnGkIcwZYx\nv3aK\r\n=fJgk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLfVg8YrKat5+S/0Yu+vr9Ag25EBJugNhd2QM+LIlKxAiBRES+R1UxeTo7Y9cEojJuvEDuO49mTqXznW3QTg99Tcw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.2899691d.0_1610761483530_0.48820938465328556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.fe73953b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-ripple":"0.21.0-canary.fe73953b.0","@material/radio":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-bnVU9FoW+6pG1nZkYBYugja5fcdSyI7STFvmedxPDtU1hW0UdrCf5LygLyqZTAKiP5z4ng+S3COiCMcUcT8MaQ==","shasum":"9ab347944c95fc93879d5c4670f1f8cf3c8d7e46","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.fe73953b.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzE+CRA9TVsSAnZWagAAFzIP+gKfMnfbdaJBLWlgUbjf\njaMYyi7mYFiMftqjzSkKWVvC/fDl8W2mA3aV034T/Vt6hUDFOvJFRuz987rd\nTce8j1W+dBs5OhBmWNT4zJXX5nXwxI5SN4kLE652XuJSQS4lCezMf2tJGDPb\nhVwqzRmihHVjwnte7/XYR7y+5kEjTVXFZQqdXssy7uNFq9c/3BFlpEcYi9rJ\nCdam3uiZHnNZ3lvVEb0MfnCOCTpdU81VyShA9aVE2PcfR7khWUN++/Ni8Hj6\nNilsLfXY4piR9kbAZzZXbhz+I68DFmdLCA5JaybRdQiK9Ggvo5qQgyVdR1lv\nQUqUkUpgvL+tn10M3USuEAF8DRsDCk9VGgpKacBk/xvS7Mg8HK0Za3hjBujq\noqVXDCXA8yc9/2o934oxzQ8brKmJugACqL9Unh41OFW1AS7r0DzQUt9kBodx\nloKl35JFGQgHxitxCJxhd/3G5SniyEoar+R6/DphJ3WvrLSVaVa5L9k0H9KX\n0/8hk35QyRIwB5SDOZsKiqUsdB99hzCETZnLJu8yrc/5jfrhgTYRn2FJEZtm\niEz4ErC/oGEch80yxQ94XXTvaNLWTfnWTkctCYbU4bB+Q/OKPxdz23dasHWV\noW9echWqScA+VZhh2+3g2oFaSPRs1UoucBnJSOPIvJ+pyq1l/tY6HD8poIFE\npQ6X\r\n=NpGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAh4eXoFbSZEUQfbOOrjXr/ufkNfbMcBCTGJF7ztGLlxAiEAp0HjL+BA67K6Qw3fk4cY07TzwONAa+xX5OmT+riLNzU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.fe73953b.0_1611084094013_0.13874391983168088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.d3a16455.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-ripple":"0.21.0-canary.d3a16455.0","@material/radio":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.c7c5da28f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-mGp0Qw9kM+b4B6FX/Py5T0YjaUWEAW6zcUvym/GlcXxhD7mN3Iia4rgBvW/LwjlvnGf4uzbLl+0u233t7wH+EA==","shasum":"6e50848620741047a61ef3a78115bb3fe1c5d9c0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.d3a16455.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzh8CRA9TVsSAnZWagAAMTMP+wekdua3/y/ck7dhJr16\nSnmR/gF8QNljfMCY4NHO8t4uyJYNT+U48jVU/sc2owbjMMNihiCWeg6n+GrS\n43BErKA8TacIwwRLlf0L8prIc2KSnh1UK97sA02TIv3/KeOxsvDLLuad/y5L\n3AImZARq+cxnKi/P1WfIutpdiYmxV4GBSNHZ1syjiiqz8e1wCd8pkFf5MCdG\nYogSdf3/zqghm+s4tNm4O6eYljzuc2qTHIL/LbUk5cAycuDbJOKCLRptRWqp\n+4ctScMgZvbkfaFQ1a2jxpYk75MV3DvwHwNHQkSQ7ejEuFgDqyk7nj7N+dNX\nPFM00CgFlho0a1xBmTnxwwJVMs5+D3OMwjQxoezoPn36Q0PxPXRUjdYJx9zA\nT8sT4jnBQK5ZV1Ffx/PWSMn7UrucFRdSuAC7d337eoOyPFaOrwkjWwT/5aIR\n9NhO8g6tP+OQPoLAv2d0uMJlSyfco7/MLCv4Gk9sFWEOkXmWHgolVO1+V1RY\nI+U5SMH5uiyRQ7pjJ07h92twhKCGsGAI1MWfxZnctauMKsPAxr/kEOblra2P\nrfYCpZmDMCJ+Qau0Fj5TD/96eASuuhBkHvEaNUsyXsHsdCRBhzH8ftwrMWyx\nAIxCaFnM1jtyEX/JCxohz7PNtVSilFDYAngAXSWLBHNwvqzO5NHAKZh8wgSd\n3Xbe\r\n=XO3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0Wc/frgodoLhXM365Br7mIeyS7S3eiCKbF2D6Qx92nAIgJnebNNGbl4AXEuLj6/8oYk8vu+0+bpWQwpDmVL6bbPY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.d3a16455.0_1611085947839_0.0714859326825854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.597ca1b6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-ripple":"0.21.0-canary.597ca1b6.0","@material/radio":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b2faa116a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-uis/Fxoc4KJxEV6SAimeVU+PgQ7Gh0OG/TkzDDeqdIhXtImQEEGwk6pvI3Nh7Qz8JbmvArEo3U6TPIG6kNqmLw==","shasum":"c7e4cfe515770183139e212e03025dd4d73379c1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.597ca1b6.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CPCRA9TVsSAnZWagAAIXgP/3bhMPztcldV1axVkTbu\nwborTXwhH5UpwtV5eyNU2+OOSC7rlvnwCLgs7nehThnDPZb70Z/fBK3PUkL0\nRW4tkGxpohG7W67SUPR6QmItRo1n6BMGdGASEizEOETYeuh/eHOrQ7E3QJ17\nF01/70VUYt4S5vcEC8GM7v0VPxIF6TrdfKNAj0zY0Dwaw5REqrYhwxIn6PkS\nG3kfT+s9wTTN82NKhO5OFm1NYOGX2clCpctdOq6A8nyvUp3lhXMA98knCv1M\n1CMJkDQlTUW0G4IR8Y5SBfjGnlskdsaRAaFiLc7XvmX7Q9Xpo94o0aToAiBj\nmQXvVdQn7MQOCP6Irnt10oksG2YqQ8X0WTXnCZUW1WKztzI3KOPY9DrOdaWj\nofVvCPFeSRgjithM1hLyKSuDjQHQlfqHSVI+534fNTV6pd/7m7Z1FA5u5wfw\no1XkXMTY572bpPC0HH8pp/b5g2HwuJtOZW6PXnZuLPfXv/gxobvg9H+7+bdf\nDZwsacPoiCn8LGEJr9ns2CYuJMR53fCtVWV57SQR8S50Fw/u25j6VDk83Ag9\ntOeHG/79QTDDsymom6DjES5Ym7x6NP2N9gLb5izppNI4GY+r6nnSVwih1uDH\nlv5VsXhP0RaXvDsyQpnHg6T8CJbrjs2AE73A3FDIdF72exhkhXn7nX0FkYnB\njEhO\r\n=pSO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKIyHuJpAWHCvRtQRBtwhXTdWhtugW9sfM+xoXyqLQDwIgFFs7Ug6cPm/UW5fDO0Ra9z9wERLZSFXmWRFlbU7fSiw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.597ca1b6.0_1611104399509_0.10049764295340968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.3c195efe.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-ripple":"0.21.0-canary.3c195efe.0","@material/radio":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b2faa116a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-5irbbd5uY2pOVcj03TtHTG0p1HU+/QwGymwS/CAUesfku6AhuFo+ViDyJ42TMKDeOqg9rW/a0kGpoc6rMkmgsQ==","shasum":"94bea6e06902668a881866f90351532f6bb152a3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.3c195efe.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48ACRA9TVsSAnZWagAAfXoP/RHfsHNetj3oUua0ojOP\no3M5VWifBM3QGc57mg1OSybYUUYn4JiYFJMqyiLeah1Y4qAUT6G3FvbupKac\n9isxBuFwkD+aCqWMp9rcmf4nN10j5lDQAYUpEx5Td/HBFdHk8OLuWCQpCVCF\nYT/aoMKCfez12D15tLLlNtZi8zF1u/z7l3wHrf/ljcacRN/rZEZauG3BH/4S\nrhKB7XNIoo8Mfb7IYqnMJiAPy6PlBFg9Ndp2/gbfK7iJY5yuzLQQzM5wid6J\n0HqSW3nxFYbNnpAmeWJTssksCv1EhMwqP+IxxsPRme5CklWyg/Jmm9CG4WWj\np7Ics7UWT9ZtKYbeMk/zA/DnCpm6sXXHr3koyDl3q2MqlDW9xuYi75ovC0D3\nzvmgAjO8c4IY3hQuKrBY+g6vSDkl4+UVTV0TXfZB9Zw0RpXhYdrludYZWF9o\ngevZeFQwiS62pi0JnnIyGJunxd5OUJhokLHzX1kvlCcZMfCAGtgC+uZfFk/p\nySXcVrmxcs4wDXtWHoW4gt7JvPBJN32KHnew3AZggO4l8ZjCF+XyWNky4BVs\nk+FXktn5Gfes9iy8CEKPq//OoFW7YhLYmMlUr9woiqt6UV2WHR9d+VqbhQ7u\nZ0Z1Qp0PeLlNb0cBSVi0OTZ1KD9VXL/SXlEgYGuDQH8MxIjH/lUMazHXSPGy\nX9wP\r\n=TJez\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc+aDZlykuvGvgobAjJ9q//7G6UQXHdnhdERfTOlZ5cgIgYbi6cfR/uYCKggNJ1REHtyn+p04PIgRH+A6NhaMs6Is="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.3c195efe.0_1611108096176_0.0018982851135702639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.f7b8755f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-ripple":"0.21.0-canary.f7b8755f.0","@material/radio":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.0c95c9f7b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dL7iLYRXDjTKqTSRQI7eGgJQ1EBr+E+GOVivmuZpqltVTTxq1BZHNcuET/8+Wfjb1evn2AbXjCSbmH0jsIzV+A==","shasum":"bbeb98e316a69abe5c2486fc39e63793b792ea16","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.f7b8755f.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSfCRA9TVsSAnZWagAAWREP/ihDg7coK1jZF2xbTnZd\nG61eOKCk1O67uLyPce8vTo/uTtnBWN6jBHP/x1BMe9qNSAJV37qPMAN2FeJ7\n2G/352q9HQzH2MLhU3d0wUO4zu7XSK2FUlPxgaQPEwNa0qUI2W2yAHVHxBBG\nSa1FPlmxSLDEtEGme2G2CyB1LHT1PZ0js73oMCoNd0KiCajYsx08jaynewKl\npr3RRT5gsfS62qN/zU5QQTC82uH4H8XMFcC8JNyzYwMgupVX75a6PnZucrfk\nYoWc5VWCDRUNfutfb/QGt+KYiN+XGhgxK5PQOFuUtmKjOtWBs3CprugxQ77i\neaKRP4cRGdF9cJ3oFPrBS+Pxrtvwec4E9xUDrblYJ/deR6kr1Z+2Fw1mKFJh\nnSo42ykXQOXFghlylRgM5ygBvh9l5mHMoJ6sp6Jpo5iflHBVz63vyGsdqvb5\n3iWhvaJQOsy5zugOSAE/5yjOyfDoK7jQSznppR+dtB2hdNk+kq7BD/hxjmOa\nTHV78e/tPN85PoLvpMT6cA5LKQZ1Q4QVQNm9x76Wb1GqEG8EpDrogSPu7zPK\np1lR+tHmCffOpZ0/znPi+v3ujkAm3XJRH3JF/9mXEy0zP3xAv3ZdUFTQUBPv\n834i9FuUtdBs5gsRnsr3UXBydPbR7FtDon4Rmvvt1I3s0H5H54JFGD6JtjMv\nJZIw\r\n=M47O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5iMuph6ZbrcgedU6KKYewLBrgBW/LQqqirHsIY0Y32QIhAPV6mHp48XDa4SzNvTkvRm4/o6fw4jDsN/92vwYyDcC/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.f7b8755f.0_1611175070594_0.6460922885599301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.f60de7df.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-ripple":"0.21.0-canary.f60de7df.0","@material/radio":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.2ed2d829b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vChxLvvT2PNTj8+YFn0T+iEJ3v2L2qteBAqYCEJLklwJ5CWkK/L1vB3QbdPmVudQU5TBuP8KrkcamW05V7HmJQ==","shasum":"0688aa95139887aa2f4a3d3c9787f1e5dee24582","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.f60de7df.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6QCRA9TVsSAnZWagAAjE0P/2pXJaD/chEbGBPBZSJ4\nWVtsd6bdHHwe/VmcIXIwkhGd9qMoPUEXtpFiKsWYc+E7VVZWkvm9c6waJYsp\nT6xISn3aJbjeNJkmdq4x1bSIc7XIgSRHJaCnopPOOdajVVJar0+wpLs5te25\nQKVSLYRCHdoouJSLoFvNyYXMMCf8/hWBi24cfR9cXnLRtGAOAIOf6AGqMJO9\nfB7F5/aBB/PuywPTncGhCFN2oK9H9czJVpEEQc9iC3gK/L0sgBTp5X/0G9XY\nSH00pYh1W9r0/7prefnpsFqcsH0rbsfe8aEbWnywl6ZyyXgVqJQMIYClB6Ho\n56FZoe007NXznqG4LblVq1YDBAGXVK3dpB/gRjwf4k0jmVYSARtXbWn0cS9f\nz5fDLLH5MMnInsLV83nCBqQ3LxHjuIWkIq/m6Wh+KNyOJnrB5JIZH/nqn6yE\nHCMDNup2JCAv6SHDGL8eEkXm5jRmwuBGn92PQKER+kQLn6pFJNu1b/HvP9pd\nPQH+78ClFeVnL15xFW+YZBLbJ46Da4HnRQG0iQZLBsgR4acgZo7W04GINCwW\nBaxzJblZmRQhjShD9AhkXlprgrMkgv6oPEPZvMuZYFHYjbPF4vgeLdsPBc1C\nDkqFJUmamedkEjZJ57/R1XyiUysbrvm20oaizE9kfQ3JmtESY1Td6vT4Nnjc\n30WX\r\n=Eceb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC35GR2VmZL3V+Mee88ak+qbRI5G1gcOGErm7HBq4f+LAiEA/4zhv4L1SiOIofJQ0A+uGbWwarH1nFkBQWlmL/O6kg8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.f60de7df.0_1611185807582_0.2491215966665099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.664a2927.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-ripple":"0.21.0-canary.664a2927.0","@material/radio":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.2ed2d829b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-c7/As2DM+JEjpHx5v24wgDK6fHnD8wrRCI8KwYQRVtVsL7QmH7MQwKduTbIdRtkhjEm+K74K61bqbe/hQ/eSjg==","shasum":"3ec4798930c8134e5b97ec216b4f1cf9c4d432e9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.664a2927.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOUCRA9TVsSAnZWagAA8zsP/idmSD75R7CdR1+fWxhy\ntEobELkSGTDveO7Wi8Gm3LLQ5d1bVBkYa3iFiUuxIkxQpu6vLi1+NpvRBwKw\nmB4TRpjNSC5cgOcwbmhk7Xn7DVqmgMqgUPLeydYlucSLSs/U8c2gt3TMGVPx\nSEDHSAz+USM4HrAv+QM8W85Q+VF5Lnk8lfhLWcTn6p/CeADiF5ddFRsjunC+\nVtnrZW87PkjYXufqAXn1CHN5vbpWJ9XKtUPbLEvjvBAzWQTvY0vc7d7R0Jqp\nnlGUnhKpCxKF02YIoQ1jzejhQyLm5aNx4wXWLddraj4f/R5phjcwo05TANQy\nZJTR1almWX+mCr+KTXrpKO69ZA5qPqqSgFs9t+UigTaKiUdn9CYSgsm2TXHd\n5yU1w1p8TWWYtmdcompEhiv1dDnhgZN4OiUPJn8H7AP5lkmd81auJegSb/Ti\n5IznebWi5GNu1MR/MpNibVpuoGLRPMbWLjZW0PCZfyoeN1OhItVcmGN/eu6m\n75sm98hW2lWy7gBoSRFxxAGY8eMJ7RI0t85dDIGh8Vq9SM/v1qbtlkaXsx/o\nBZ5zViC1u3qUoSMIN9ME/1Arfa+D1ei4A9t6VCCGxmPzlZQoqP32tTXv+u76\nKpcMMDspP3VWZeHP131p48Xm+0ox0bH+8UUASvhkgI0m4qmOq85ZK4U6j/GY\nPIkU\r\n=buxv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR4lInUuYY15NdSToCmUx9nYifXTfN2giytxVi00FMJAIgX//GJ3Ix0rF5jlhF1sElJ8AHhabMx3uOZpK4xkC6vJ4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.664a2927.0_1611256724229_0.7877305423938603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.a6d312e5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-ripple":"0.21.0-canary.a6d312e5.0","@material/radio":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.fd61b0476.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-xRMZibYNZmj8BgIgYUiv4eh9Ig0w76xkSITmHj48dIozqeEKeST82I3rqFLZb3I1htuibUWw2U5R1ToJN+AiXw==","shasum":"572c135637932c4b8e87339becff9f9ee007fe5c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.a6d312e5.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZ+CRA9TVsSAnZWagAAynkP/R2ackbf9/8/wI+6kNBN\nIKUO09B83MQSbmswLMsGqrCDUKx+GcfEhNtMm8kl3lpEQZIXtetzi5gM96Su\nzOqHS6g7qR3MR6Q4JPi1edMUeg9+lcQutpNrwQ3VB6NVQXHxL2mzROuSWLqS\ndO/XIoF7pmn/k88MfOl+ljWl6wtwy6J0Ys6CWYdHQvKTTrdQ2wAV5f0mlsh9\nzJ6kwaT5f5kbOAsOmY0wW8r4Jk8jMAHFC4w+zEEhB6TsKKMtF38LC1y4ThuH\n1ZaTypNFs08SkpqovoaEqyrvw0asx9B5MPla2c0QT7mgFK8WJcvOCGDQ7V1z\n2Zt5fzo1ErfTIHm9K6M4BCTVmUNkKmV3stlawmMg124PBm1NB8gwEY4EgCqx\nr9Zo0envddC9IUEf0kMYfodYe4jYpnzlBQGIj4sryTMUSe6aq1BFIUvdlZOn\nvsWkx2cKgBm/JqZ1bBtRMmCdcka/fRbBi1DFx8OFBhob56fEzbID10Qg5blY\nvoo7FDLGyqHMam7AEPzQn/9Y+p8OKVGy+6j7Oo7x5SglJX+krXzaC7hBB91V\neM89CdJjijsRd8FN2vWlMvvzPADNclkxOzzctkdBI5hOjf4gJUC9Tg1no72d\nl0HrkSaR1wx7kIyiJneY3+89zV5R3BrmFlRe9dt70SoMhUu7WfY5rJkd/g7F\nsI0L\r\n=MwpX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVFzwhshUUkwyIzRbKqA2k6ftcdJKZK8f8EKF6WXk7agIhANDYjyzZD2FxNhI1A0DP4VNz4lD13lyymOCmL6X0MxbM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.a6d312e5.0_1611265661696_0.6807788539343187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.027365eb.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-ripple":"0.21.0-canary.027365eb.0","@material/radio":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ayv+Z4NStN1o/Bc2I8jvkXtTDz16lKAlS7CsDOatWZEEDdxnAh1qTO2nXLJHvQ4hCVsCkec1D1d+wnXhTukrJg==","shasum":"a4f59acbe9cf7f9dc9197d18e5bd051c1bdbbec6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.027365eb.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6dCRA9TVsSAnZWagAA3doQAIa8uxBW9VV0UujOfvFi\n48SeXgJlxVjLQ3I5iPxEIENnfD1v9IxnEaaOZG2YFjVj5GxxNxcS+q4v2ssv\nlZyibXBoch4rFIjk9y1D1bAepchXWUxLi2a/c9T1hr40j8oaLGqy6cgxoHbU\nMHYpun4Ms3EEq2bnn/ylm3m6RyQVc56rN6abyKKcoLH9dxpgWFq5oMs2a9e9\nTg0kf7GY7vR0rtNBKSYky+l5p3TVz8XXTcKofNR5o/TpGFOmqQJBpaxGZOCB\nj9cbCqOdiSGPd7ZuYeKLsvkBzFUswlrENWfv2CRhzV0RpLx35oIDEhIToGuH\nWfV6AyU+Vq/pPBlfZ+TA9kvg98igwoUYnuiCQ61L86myJqe33hd16WnrJE0/\nzogDRQ9XZCMZGRq5cKmRco6/tM2tZeXG3L+AumJlks2QJ3UwAPG0tXqgnkxl\n9MKpkKEmpI9ll3sZom/kbdJD5LMt3wLHv8wDTRqGK5CDHJvfZi54bnCBacs4\ns85eHtyZf2R4vtVTh5IFNKsSCyBfvoWTtnaET/wJw1cDul+oGHQB0jZJOTiT\nAEi/I8SuarZdajmgZDCSi0De7GsthJy5ul1iO5+gcqHhPCM4j/3d/FOfQFow\nH9i3w+FsHgP6HQidNheHyfCnJWrDOL/6AOT0ddua2zL/xUwZuE+xueoFTD27\nkPpm\r\n=98lV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5SLjWANGsRS2uP0iP+8Ho0fNUpxivuHG4vejiWhap/AiEAvBwKRRx0RLI+lDEGkdrXyBlU48zK6vTsOOOnn8OOkik="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.027365eb.0_1611349661176_0.39795420415170635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.7e72b66d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-ripple":"0.21.0-canary.7e72b66d.0","@material/radio":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mrc4o/Jh2/XGOHSECnI57BbVPNJjUvGguOzD1E0rsFQUVc7uT+I9hqURxkpMLvyYqpQHgWI6+erEM4soWOfYWA==","shasum":"ea75f87fc00bacfdb85f608192b365d816d090f5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.7e72b66d.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18xCRA9TVsSAnZWagAALrsP/0YtrD/P7Dv02n1NGt2X\nEt0tsmcQ/Kzi+bSbCJnL8q+MrlGdyLXNOhLx3XRMWmGQTyCxnA1elTltCSki\nD0sutXR7q0YFeD/pyv735EEC+QK4ccMF5uNEK4pehwLAPj5isht8ZSxTYjQ6\nulqEZ81L+vrAP28gdz65E8MXkcEBZQwK7ayio7EZBmFe0stapRgF2InEXi9O\nksdGDEqRevQRKDhN0XmpZpmNJ2OxHXtxSa7omKfNPAArwjzmQ3DiwLnHgjmG\naGAA8CQRg6yCoOWCeu6f2WLE1NabylHHZTXQFKV8Zr48p2yQJE3VxaLyN8o8\n8urYpFihbppyZUNEJ2SFuIYLoUZ1duA+kScjfe3id1jkKx4B62mFB1yrEyXs\nmjWFqpbLxmFfHCShRRAQGFuhNELSt5j0TVAA6Q4J74Lxz6ynmxASuQsJFAAj\nslezgGQ5JIwYbOUnbt0ybQ5N5FspfNNLO+J3+Ol9KxnwV7H8/24PJbNdc+M0\nE/QKJ8o0L38XVEZGKwlvTNWtfyv6zQygEsMc3kmYjHBuzGax/sTEj2mSK2Zf\n5RixqqtR96DKvZ5kicQKUf3uehrVVIEgDktiK4MjzToq26q5h8/uCAh9CVzr\n8NvSDvRxFtCF4jZVvW2T4JY06CoXd68mRrmnMNEkGWGdYks8ayswL9MDimIC\nuUUM\r\n=ca5C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAHD8l0IbnRveMsMTGIlC48UwxO6Hx65/FcPouQh1N1AiAYYvUktFcYNKEWFArC9kfZSZQB2wiblLkN3yRJFpzVTA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.7e72b66d.0_1611358000875_0.9853135672355062"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-ripple":"0.21.0-canary.a6d6a1e7.0","@material/radio":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GBCL66Be2OZsq4BM1/f9jSILutPw7sEJmMC6B/IGcWzxTH9LU5QHkrvlIwlZgbjdD0Uy9mjhLHgMTXuezpc8Vg==","shasum":"673c85919b4213eb0b4096e599627be6332cb8d9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CpCRA9TVsSAnZWagAABW8P/i+c79QakmYMAJyb6DTk\ncCthVpC2z/2wDsD4zjtESJgIjWjLazi3CnvWfnEexNSbtSuHu3S6PS0a56vh\n4l0hitk9w0Mmf+dwiTJ+gQZMMoCUsVSygUBIEoIyADniTzdbSdEKBfw0jigQ\n+QlvZmvmv35F1ehaxLoudjrY6xGyOpxk+YkbMN62fJ3rUCcj0q0xB0snMJyy\nKUSWeNuiz3B5vzWGsVRkNSgM/noTPEcuwUoYB2V77MFYmlQrQRug9liq4EOQ\njyla/V3f6DkSs7Nu5sk7XRy5t68EwLNNf1tIoE8NMC+I7nXFW/9lFcSVdWko\n+a/ubw3Eh+kiGnCc9UX6EIYtDjdgWMdZp/lkSlWCle4Zv1lqmfJ5caUceVx2\nwyjVBhdyyjCiY+oes5OcMKtBP6jSKLvO7UOZFYxVZj6svcx3wA1llXtwmFGz\nEgVJpifD1L6O/2v7RpxKAGhosovy/l/xOpNie/R2kj8tXjgWPy186wk1rFVk\nDCzaW8SHeB1R250t4NxWOaw+rOcdrfiAGRI66/PeBg5cMANGp962Fo3zlOp9\nPAHS4PU8vQUbMP5RyqwIgVFDFkJt7icGjgmweSMkvK2JxoDvGalfMKv5mvlb\nRHCOEOhZkTveSk6uCrl41dkPbWyLoTmuPzXsGvIzwinn2WB7YLen2znxw53D\n44GD\r\n=DaO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNzmLwb3AqqNf86C1VHUeDN7FepuAgYGUQPjzlGNzI/AiAlocQ6mz1LpD24Ed3cGSAmbo6aZFd5/FOoAItZRK4x6Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.a6d6a1e7.0_1611358377378_0.6549802264466607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b95fe100.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-ripple":"0.21.0-canary.b95fe100.0","@material/radio":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.07deaec27.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AnPiyrtd1u1rpUWNDHzZCxQgKy0IQRyKK+6YBKUA3jydhvAvi3WK3kPaOvyZ5NNOqZi6zSkiydQT+NDv/iQFkg==","shasum":"aec3ed2a60def2b28d7d274b9f5806f962a46e8f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b95fe100.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UjCRA9TVsSAnZWagAApJ4P/3Xxw/zA3WWSeTXriFdB\nTQDfWTwPMBfS9ATYKCQdAOLQo+hwYgb2Uyxzur16OC2EQWLlymU7/a4wdY+3\n0i1vwvKa9m4wk7KHhd5qeUWU2YFPqbyqkWU0YyqKw6+xsHe5w7IBXQ+HOSRT\n1iXjJTJEyA2adYbYzpohoYsLxQHwzd7Heq2x7mfZzLPPhZtnKdU1wdxqRU1/\nyRBBAZdFZolbHP/MMlyZl2SHbxGthruTxX3LWmRw/9PksXaKzBsfhDAok4XT\nGEsdzsw7TNw2DVxHBBfQIXgC2WnBuL5JxRIP6D22fgpRNvRK20CfwCT+xMX+\n1VYCHisMbrkZnMy37x9WWTPYCmHlqFF+zSLPYR9Xc+miru1sg+GTezyagVrb\nJX0aoYc+1neDE7pm8L9BQywPniM5yd6B5jO9mDOCOm+yeLVebQFZoHPPBFYS\n2N/vhfezmyDDRfkotd08plJnzwV8wxioLuH0o+Wz9wjUK/0M2InAtA7I2K/G\nbW+ydnfRrtq62iAbviCj9JsaUGo2m02GsIBXjIgUAzTseC8Li4OVG3RcZIWz\nT/IxM9wIuDvNDIkoqs83UE7oebzlSTUWbRbJmkS7xhI78xsm44eVNZ1dMgpA\n5logDvoaL3VqGdqKOwUbeyAD2DcmKV6ZTtpgENtD81y9k+6Imj3QP36QhUVL\nzZLw\r\n=mpSs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICr8UbZhsNde5wqTSA04UWPOaGVndJeVEIlA4Et6VZGPAiEA/U1yJmkVODvs3Lf/LtQRFjWpzOSUhGzEw69hn6kabnE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b95fe100.0_1611359523288_0.35174969648681387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.c8797192.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-ripple":"0.21.0-canary.c8797192.0","@material/radio":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Y4ex49etmeXBmDx3TSO9fr3dMzzM8GdwiCK1MgsPMCx9uihUXI5TmHap18fqpqqrhVBtmNZ29SgeN4Y9ZT4NFQ==","shasum":"bc71a284d71371cb104627f70394c0e2ad98c548","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.c8797192.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2i+CRA9TVsSAnZWagAANZoP/0BZaB2mwKck5XkRP1tA\nma7G6wQniRyEjXpJGBIQnWjOUoe9JJhxN0gpsc8NPCGFPnMEHfTi8LkVGRu3\nPj6EwB3l0Haww7bYTIuV2gFMLtA6+UwH4v7jr3SPJwypFh3mbGaG3fDYhYVm\ndOnDg8cvHScBCqtkcCpqqvgOkkHBdApD4oNpFa6kX9CavgB39htef535yFoK\nBsqEQIQXIWGKfU9aDWOATEFue7ZkEbtF6cnlkJVdkZWzsbQOf3mt1kajedHj\nBouoZJGK/AIADi9ndJf/mZM3P0VdkbSj/Iiol1+yGgOYyoRMNVxZy0o9dWjU\ni+G8tR4uTIRzCS3LGjapb5zucYr36RqRPs4XKkXaWym2X7vViWw7dHhJlTvK\nsuxk/NzP+sfg4YTwWB7l54x4tsIji1GWyccoIvOxPlC7vcnnioK7kmdgzVyl\n2eOaBhNGNjEmrk1ZOIA51sqF7YM4DwSPa6bdExn9cXNQ2AbIzkREa52oufLv\nvgdZUiLSp934Lyg4ocyy/+JJHBOKlDTw2twpFwvDt2Ct+wXzWYa65cOic2II\nOYb+Nc4YWG22bK+8wJtGGBADmt/O9KN1KUvxasy1Opz1HvXSh0m+a66a2jDk\nZw7LfTytMnoVSUi2apyTGbY0y/zu6NTz6/4pPjw1OjMHgYmsfVg27nC2UI81\n6t3a\r\n=snKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm9uYXxNQEflTM39RFL4tJpio+WJaISA1pQ2R14I3ziAIgOiTF2cEenb3bdXIeoN0ijYgMp3fTeeWrVNHkL/NjLY8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.c8797192.0_1611360445567_0.23774140612061068"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.946f5563.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-ripple":"0.21.0-canary.946f5563.0","@material/radio":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hf2fxmTmKL1Td7mj0WHVuaYuZ0Ep8yuwmrDTBa+DDT/n+YS16ozRSikBVUU+77ti/CCkDE/QmFkxRMT7wQU+gg==","shasum":"844de4c2e347cc785ea058f50238c6a30197385e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.946f5563.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3E+CRA9TVsSAnZWagAA47oP/2sqX7eVKoUQunNTKs7y\nFs0YRPPwfbmXQOCiw9azsXc55HGsZp7Z9Ra/eKj2RsbQP3fYZEGkGWC7e/mU\n+tD92UIJJzoXKg0CuTmeV7LsaObJjjZAdCi7BYG//B+QEgPIBYI0szlJg9Rk\nTm1H7tbJM4mSs936s/4tjWCv1Xa24XlBzJsjCZ0Dp6tqLNsW8NKFJlNxyAte\nAnQG5VPENOMy0Fjj0WfPdrmehxhT18LCS5Wnd7eqfGOr3FUXuqhjDP9txsE9\nKGhUaeCRgLJbqXhMg1oZucD8y1vLUzzBlcKQcBogzHVz0GkYcvjDDJFeU5Zl\nLitPzvMZtwOMRohA7TbWaH7USlYbs3mLUU62fOets3rIJgAe4Dsk2KTwPNlN\nGug/qx0x8oqcgBH+U3CEnllLIxF03VK1aXpNK1joT1aAwugGI/GlxL+MHJGq\nwXWsQ9hzgYwVwsYAqfm5OOuL3NlxznGHOGnD1uAkSdsQSu3+bAPVuwjIwwBA\n2vGCOYq1MlkYW8GTMLh3c+hJqJfgrBO0f/ZUQHeAfb1pI/BZk6gLaXnfu1Oz\n/WKaT9HRdITX5Ts3857XPg+WFkWNlDy4mtDhJzON+4Tvo9ppMD/CRWn5NXAx\nnhM8UdcIXgWPjseungpw1/Hkg3U6h+huFm5H3T5x4CeDGloRSi3JZGtHwI1A\nk9Zz\r\n=VvOD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpuj4PR2p0dx9SVXCmBNvztUfjQyczag9kZ7Pce09xNwIgSWfogN1xAgY+xY4eri6a4L3govCv8j2dxtcIOoq2M24="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.946f5563.0_1611362621762_0.6764498725439734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.43664f0e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-ripple":"0.21.0-canary.43664f0e.0","@material/radio":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HwMJSuvjFid/skKGey6ylgebWtE64teo5cuDlp7hpaTXqfKAcyiAg6h0Q23Syop1qmeuMpuJLlfx7gXUzMeT2g==","shasum":"7c2c8a84c239093dea3c51c07201c49e5871efe3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.43664f0e.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jTCRA9TVsSAnZWagAAuGQQAJNPn2F1t/uxbIdRPx3w\nXaB47B3KM3GuWWfnZR/AWIZc0QB692LY6zUXYjlhVRvy+2DeACU2eBlSKukT\nDl57U1zmwkiLGdBnw/atf6he/E7d6iBuWdUGYlP8b2gRLlrkqzDwiKcoNzrf\n4ySE98HK7RMK62K1ny19q8rgPHRDthksa1qtQTjrI5OFn+yX75hHC7sQjpHA\nGXxNQMYrEGuerre9d4CudnKaoPiP/z+LFUF6HTQJExczx0ZQLC1/FHQy+CjY\n7+zH7hkrRHxsX18f59Gzfbt5Qp60/16kaxT5P9H4zKtJJHBWRxWYfLc6L7jh\nnSyxLSByZD4pzNTuVOWbT165Ii4fW+rn53UKdmJ4zrMvXefvp3pirxjd5+UC\nXXHShi4eTBuRHoN1iMEhAbvGwA+wReVZMSYA7RFZipCbh+QeCmdcTZc4AtMO\n/qMu6bYhRaRIJst/JE5NFtZ58Ksuosk0JEGtutHR6Xja1rcirD66Gxz6w7ly\nmrkq2EreOj1/rUAPkk8IRENvPp6pHpcaEZwabhVNuahA7av50YIX+q7ryutD\n9/nxf+QjB+gxGAgjL3JCwUl6Ca6iWLwDtn9pn+R9Xwq+73La04Lphz30eVTq\neGnNcgd6rQVaL99nY9j1V2uRp5hD4v7EmHS95nFt9/2d1Ub782suJPNxY24C\nLtrq\r\n=Cnjw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmxFTZX3KW2vhEIOJiPnWcLvjLVRw8Oeg89z+9Jm15KwIhALH8wW5sbOf9wEHu7gxO0hdvCDDq2J1+ix6L8odMUMbR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.43664f0e.0_1611614419572_0.8586881869726297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.2e769e3c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-ripple":"0.21.0-canary.2e769e3c.0","@material/radio":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.b9adb7a0f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hhsdTf9tLNOKVvzwBi/vLqLyFl+WRXp56e0COheDagvLQbv5UGZLXuRGj2DLa5IPLNJYnEd01ksM4FstQYU8zw==","shasum":"0e3afe5759795ddcc41e0b5b85966a6949a97cd0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.2e769e3c.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10BCRA9TVsSAnZWagAAfBIP+gMZTeRXjg+thkG5AQfP\nbGZiMKQa0tsBBHbA7XcDZScsuUfyLqxoFvblfqIy7yiAIGuWxHXMha/ldPOf\nova/1euQDkvYzMqxQmVgQlQuRImOQ2lv/5wHQoZ/pEfoLuf6B1UTIn/9m9PS\nNnLvDk0x0NNcop90h8D6pbE7V/x84Q5mxPycabaIHJK4XTh9KWppT0NzeN3L\ncJOlQMGJCovVZ7J1a0k2ltRanEDd9DVmDvP4zWBogL7UVSAu6S+ph20vCtrY\ntajFcHo/ugeaUE5c1nEpb6V2q/0Z/mnY0AUeXjlNpNK12i2woqQBTh3c2iBm\nmCEcZ91M12VRYFecAYshJhsya+QQsAsK2HS6IkgFFYGD8324xWNHpTU/PKG6\nOXPZMspP3+40zDGe9vynCJL375oAemuBdiHZG43HfLVoFfjWjf70RZwHmcJy\ntLu9lDm/IYuErWH2odtRJeZIrVBDW3b0Iqw/4DRQ+ljyeIJ6kkBW15UbLlOj\n9qtBPw4bQNm9QMQKeVhuTKhjjBAK3C0PRM0ZN3ayIbQQ7JDHblNbagBtIPwe\n9gv3TLRA6CCipqnsztWQBUQ3xJxcJgYWfe5Gzy42yYml1LS472KBx3Vuo6te\nuNKxxfg4EF/mmckI25CZUodGpiK9oxxgyJ3XtQEi5qmfx6l/S/+VZzDar+vZ\nPtnC\r\n=HpH6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCQUItHoW2pa/o7Fi0U/ErYtAjYvs+Z51vanIRvLYksgIhAIwujTW8vl64CSPu50pYdlEPnrpfwXvi40egnCJuQWi/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.2e769e3c.0_1611619585187_0.5626432048634871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.14e01610.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-ripple":"0.21.0-canary.14e01610.0","@material/radio":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hRSyfMNRbiZ+JaNC7SwgtHRGzZAVLHlFryvJRr+1okiDbgvqD4b7FYh8MOQlYYg8OO+mrcjZeNvLXbdBwkBGgg==","shasum":"db770d4c1e2cfbacaaa609a67f332059c245862b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.14e01610.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRKCRA9TVsSAnZWagAAxMcP/jnagDH4G4asjgZDPAm0\nPWk34EG0I9BWA4FvfvAO8xlqgZj7yq7jBCHuNj8goH0eYuYq/NFsWvpqEWwo\n3ShoP5Qh9V2BtBVstO6734QIeFo/WaiurNooGqfZ1IT6v+UJKepCxyE4aPbs\nwwRBf+PwTs6MYBqcttVRBTkNuEaxLLLXCG2O2VFmlUXjJZe1DTqPc9c5N1bu\njIc+viffT4iuXWmrxrM7jZeeASHgRJtf8bBqpvm/SMK2T7pyM8IWna5ZZ4mr\nb2pJCW7NfXyShdO4L8pt5yqyuAhP6MXlJnMbhS63/DT0B4oC7F8CZ3Rf6LFI\nXUvdRryT0gN47K0L3IGr8RhDWMZnu/xKpNweB4zxTxEn9SITSzxz7TFaZc9N\nXjRUfDIqyXmPkeK+d13NgrkRSg1Wpc7k6yy0ijf6ljfhiBoL6Oa0+/zSPoCC\n11bC+RJ2JyJ7KaY8gBTkd5dEgwaTwGOzJ8dg1WLOmIePcza/Pgk6NeV+jA7E\nZdM0/xk/CkhnsGyJLCQQR+836XVNTg1DfMwqmP4dKW6So0bQtfwRcYejvT8V\nB60evIh3JrGzvti4ViM19+jMRVrDZAtakyIKphJXEN+yHD3A+qEt/9rfcgMZ\n6Y7UiJiC702APEkZidkVv0oMgfEhGbVgcuFpKWjZRHdvHTkh4PYXTUio3ImQ\ntI5Q\r\n=5EbF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBx76KsVzgTri5eWBy21w/Y7Sp3h90r7q9VcsEqCJDVmAiBm2fKguiK7zDZDeDvFcBKHIpSVRuITLXtRvx9X9SBplA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.14e01610.0_1611777098531_0.5033376704857679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.5de00c1b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-ripple":"0.21.0-canary.5de00c1b.0","@material/radio":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EL5DeryYBI5TJNWK6rSAWH4AH8VWAhB8nkpdZGXFoni7jwP0vMtuWoV1hg8P8xOXJxn3F2z/LNlJXy0VOCFRlw==","shasum":"38aa062ad5547cfb469c85b94ed3a62a5c6e44b6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.5de00c1b.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpQCRA9TVsSAnZWagAAVQkP/AzjRr3LOwJ6wOSt2xNO\nA07oU9qs55HnYFxobP8i64671ujtE4+5c0psBPdvKw2gJmRQBhB8opU3CdZP\nivDr9CIjT6CF7JgqBIr0wSsmCy+mtl6ixWa9pcdipdwdd3CTLL1r6TLgq4vq\nyml8RhMMUSGluyaqe9RlOx2r+5PkXlTvqVF6Vfi88DFMI4BuETiISY/WqnHp\nRy4lkMLr942AY+rcI26LL2ocsMDCMkVh8vQgVKgwzbu4nJV6qYHV+STMvx89\nPma3hbl+nVG88BACMg0RpaoAhW9vczTFsI2QsthB3QGPZ1AR/4Vc54mUK9LS\njE402FwNBzkEPkALq7dbdbH5vsRtAp5+Vb42I8/bRffE4K+J5RIod12XiM4l\nqzQE9Go1jkdL9/GHMOTV6NfXr4m0c2809QbPVnkfUNuSoV0mhcD+0j5lEt9Z\n4BCYxqSlAEHsTR6/nYjzpic/NhU2s+ldLXMRHRT7f5s1Nua2cB/bCQeFHpuz\nSm1QDaOcaIzNLwUly+oUcYELHAleVFBvAbpmuq92OuEr/kJSZr4ALNdoFOXE\nka3COhAPt6a3LwvYpJX2ru3ArJb4VXTxRrxf0d9kazPstliE8WzBdAgfa6W+\n5AhJ6o/+iR0tGm40O8JBKm1IuE8sDN7kSVoEJs7ey002rZ0hWS7jDtXgfS1F\nZgmJ\r\n=G5si\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9u7NLfNhcSzGRQ4vZ9Ur94+zUVsi/W6dXFNKbHCyNjgIgATzsSmaiDBGaTJ0ZvqAUrHc86K5ogBf/cY7zGy0JpHU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.5de00c1b.0_1611778640353_0.15602254578212005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.5a328336.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-ripple":"0.21.0-canary.5a328336.0","@material/radio":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-NCWxDPkcbDkmaR/X9eYJaxW1MbPPFD1HBfTeRvgl/gFkD+SFaI8oWJZUBneFrQMKzxjRnPqvzQ6zKwVPVy1AgQ==","shasum":"ff390f1d177ebe8fd85b63dc37aa54bb30008538","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.5a328336.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExaMCRA9TVsSAnZWagAAsmYP/Ao1A4TcVxB6TQqHQ8ee\nMVjjg5ro0KgleO1rWrQMUBofGcvMQNayxgCHVVAt3VL+Hza2aDM/L0zsAMuf\nx9MF+5Hw+zgGOdBYIUelSgz3jdaA7a90iQsrQcfXB1ENQR9tvD2Kk6PF5yT8\nJqBM949Q3FyXG0+VHXTK0vAfkPMjOpkUrChpBHPig+V9lWkgK+mTwVy2YUBn\nWcGchR0xgDa9/nEdhQcmlPZNgiQjf3yYJdBOXBv5owveyEvCNUo6xPA8csUz\ngCOjumj97CZ+JvVebHxrnIVXyKM05aQemnc3Ed6PQ208egjFo3nXC7lsmCFy\ndlocdJkOpWbkXAn0LQksDEYlqGqASc+IetjpRtu/1anK+d6rTmSPi0B0YJGb\n1XHyO4tTTMdTu/Q4s+M5ALZ38mfDTfBFXxahyGRpkUIpd23gtb1AwiEP3UWX\n6NR6LPX2TauA7mtop8t9JxGFQrwYmqakzNqS4LLVCEDQ4BIdlLAkQvCtlCph\nfDoXqTvNddI/0IM0s9aJG1PWLXDPco4iwPtiwerDKnp3hSloBlpGcmMyvkoG\ngloPuMp5uspJwIh3U/mlHScpFDlQEdmTpDnJGE9poqF9F+hLa/RXhgYCnvH3\n+aMLt7vcZeZcDGkm7jlOB8TsrP5BIK1p9yKE+DZPBqJ4+bNHpgSXiZWcZ4+P\nGjMi\r\n=UcOx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmuK56GzonD30rto+6czbRdutwP0ySYWVbrh8NESEJoAiEAoPJYd+Ow1mE4cqw78/9H/oRPBl/SNCwEMLt5SHX0xIE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.5a328336.0_1611863692440_0.7246533740008039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.533b1251.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-ripple":"0.21.0-canary.533b1251.0","@material/radio":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Vaisrc0IBPuRtOwhE/sLS91nbBEtC2y2RdaLxIeSR+lXhFwlIWM9Zh93xg0OXnkouJDPft5trlkFPbybjB19qw==","shasum":"8debdd5bf461da25bacd2f02e357d46f3b4c85c2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.533b1251.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCW3CRA9TVsSAnZWagAARGIP/iHN3t9T3MZL724LhS6D\n1tNHCFCuS5q/zqdsgRkQU5+Nn7cFhMifGW8fTbv7wrBLgWFqcE0Gl4sLt84F\nJ4Ic824Tvjz/yFhqDEPc8b08fYLBHxETbC5Hho2PjN+jnwNR74PG4HBRIDVo\nsWtYbd5oW/JLFpD/3Jdg8G9X/CnRpWVlB/n5+nHR8QeOsLEngb92NGi3bZ21\nu1VT36JCwVkXRWdZM/t7LIjFG9/Jt6B4ocRHwrX62JkG1GiyEbs+ua28ehav\noTjeYHRhl7BImIUW2FK9whvoYza4ScHW0v0Z0X420OBZ25JZmHpDJNWSbnKz\nBSdPqubN2zomvJNj5joyZZlp/9ftqHnd3R6Vr7oZr3SyZ4rmF/PSOs6Ewge1\nmHyFyhZ1q4UNsDYa9iZP2VMZxD5weuKoU9YSvOyMZ+tnPQcp8cOFRSssf0aU\nHWIcPoiWNpVbyxTFxOyeA+RLMmau+YHrCp91C1pnQEfUqjyxanZ3OrBpe6LU\nn70Lv61SeEs3MWKIDbL5v+rSE0oQOZtw4jPEoTV7nVIG745hSx8hylW8YPHL\n82JxTvKvr2Rg/BVwGaDd2QOn+S7LC2RFPvk3H+Gx1ajCbNn19Y8qGgw243v1\nQlK9jAJm08e8632dl9ldsj4HMEqh03c5cWZF5X1bXcNp6VNXFBNe/uHXcA9z\nbrRM\r\n=TVRy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH2qt4hBF9mXeCFNVpFCLS+unVCzmESoU9PWmu6Uqa5YCIQD2ieBL77/aROARmGffm7gESapNapo4HbaQMRgeKXZNSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.533b1251.0_1611933110807_0.17822588363697478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-ripple":"0.21.0-canary.ab5c0a10.0","@material/radio":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-SglOpoPNGqKboNpkR3xLWi6O49nL0T8y5RauNGPvacY8kXUlBgR3vfMXKEdiHQ2jyds6WP/uBaSGrSN4/W/OAg==","shasum":"990f8fad85f0f09102196de94731b06a3f5fa35b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.ab5c0a10.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNhCRA9TVsSAnZWagAAZusP/iXOcv1SYLhf3s8a5WJ1\nB+WaJ7xwbe2K1h8SSEm9J1TfmIs4yxlZ44OwnylTwnniVtAhcIM2jNGVXtpE\nxUYetrOGNUHFs1QvogXVJMSBlJ1NspreyFAbtxwUBoEQuXnysMqlLyc+OoE4\nYDZdIkHondK1wOhVX1skt9NNYvgojPFnhjHeTtZWIHETUtbPyHp9Oj/AzMb9\nH6ie7qRheVlmAYfEESPPftk2kZuj9XzGlu7vhFjDhpBcvvlZe2maPTeTclMs\n6p+T9b4/jADBzyDiV8reaVgITJojyB0valkB65LwQTcI8L2N/27OhbIGeUq9\nxl2q9em5N8LFt6KWS0RKicSvTcxYk5tuxJx7M6eag8MZeK3E1upTFlblOXpD\nbR06e7+mjfKHBhgDFMAxyftPiRijmvj5IHTz+nj3wSijHMpDSnby40+v/HKY\nJloGo6jV2K8MAew6FAcGMULZgd0JJa0Ez7qK3E+r5Vg9ybKRAAjTlN2E3TbK\nEQj4C2nErWlQRAOMmnakMj6il+KWxfdtkyWdXpbbk+xhPHj5qSAnfF6W+ah6\nUu7Q4UUQ2gbGlIdAV2i11D5vqeyOiv6d8fWPXNHnTze/9ON2tv1MKasYAP1d\nLuR2jaNIE1IkkuTj/C0S5UljQUAW0IVw7HT6GCB66NPocgKlg1v8VLEMAVfb\n0pmo\r\n=NN3C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFMBYzI/4o8l6lJUmaRAbMWlWzL+9C3zS1hQYZpxRequAiEAyZXmq6jXKwCeqrclN/4wn9X9PHYw1wM4piCCzy1IyH0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.ab5c0a10.0_1612297057167_0.9073056123384604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b7a40b27.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-ripple":"0.21.0-canary.b7a40b27.0","@material/radio":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.96878e1d0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-smGvp+pt4F1CVHplncm9xYY/sDdRAvuZUu7f1PSSVy2Q7PcGDc+7V6FPvS1S7/kweeZjcTTbIgGCGoF5XYmSOA==","shasum":"4071b652b4e0ce969e39d5ca2f4150fe202197c1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b7a40b27.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtfCRA9TVsSAnZWagAAtDAP/iupUvcIB4b7cODCiCrX\nu0JE7OrLt1zsvUIYUMuePbfqO3HBBVhjVeciw1Wu+VONwYkfqcw1UeJuHv0e\nMxbDJXaJx0yyau9/bZ0QRlSxEBhXShAAlLPeQcSpcv7NdscPUSMPppR4pHMW\nPzDH7KsehuNAx7l9hHpREjTA0a7OEu+zQAvFJ/b4EIyildE0lGd2bzr5xlkR\nj4Coksa8klI5qz3Y+EayEusMQmy/Eqc7Ih5Tvdsc29MKlcQJuxrlKqQuPyQm\n1ztfEm368mKWs+Oj1u7zoS7KJqiIH8rt28Rw6EMeesoGWpkOX5dFfw9XlH8e\n5n+/zp9p7kciRHCO0aZHM+QDX4/VS/atDoXIgkWcYhviJZHLaBIbi5O1V7qD\nVx9oVFgmCt+P2+t+5u/ZmdHpOAvCpOIjQ44NHPp2jLXtzejQqCj5/1+O3wbV\nuXhvOXGl1AyfIaI7Ry1DJ6gXQWK2rUMQwFyrc2SyG995U9c5e+3TIcnWJvV9\nfPwrR2RZ5UsYfkWHTDn3ypngttFZ1Rso5hmwv6qzIT3TIp0T0IH3lGkxrZ1q\n8Yxh0Bv6wmIvKVHfSTQL0KtV08dNVj7+C8CyP+25/UmzfPsyMWLYStFz1aS9\nOfqSS6c+DQaYUs1bM7tRbUCJ3iQ/fYmEAZc0gVmFGoWsfadKExiffXMlx1TW\nadDR\r\n=Iq0E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBYAiJgdvsszX45kGR5WvAXs/ZkNLbj96mNkzTxDDUngAiAEGJpABu3lLZTkmPqv88q78Tkp8h9uQTiSmtCR5MVBCQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b7a40b27.0_1612364639347_0.6654498427628595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.0fdee204.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-ripple":"0.21.0-canary.0fdee204.0","@material/radio":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=10.0.0-canary.8e66dbfee.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-8ltqgdDw78IkBiNJNtdMrUnMU7o//j498a+pRAaodAa/8pr50CQGGpOzBZjQ+XnGmyZC45VwOILtC9wwGMAY/A==","shasum":"ac2a94f53e36ed6da7f239d17a615cf8892744b1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.0fdee204.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyqCRA9TVsSAnZWagAAQNAP/0n7DIG1ucZque7TW7H5\nmzqS4MNXMsAavxeFYtSjo1Jj+s5Yw8UyQHM1pedm/syjA+Z6cqK/OnxnOTgI\nZwIe2Pv5IvrVoRE5vYd2JlqAECZNLqXpW+c7JhkA6ZcR+BiYZ4I6lH4qcMqT\nAkysbPX+PNGnHLYg+SGXj7iEO977qDRuMXK4uar942v8+9f9H5VRhhziTbMH\n9//K+BfVqG/Q6oHhkmaHqGPau0k/voOLdthhVyx2Ztw13E7KfGTMDw/bMYgj\nIEAwH8Fz3vyFUGwXKvu5RflhvgWUE/23nq2UR7sr9J5CljExSHxy8MYbNBEJ\n9OtNakf+UzEdvsdJvEXxHKnlYaIsv7m/OhgRljwJ1uL1Joxs6eRQO3ELsfBp\nxeNotjga6hESMofhe++fv+/N4MXeeFpwRhf9Y1k1B8Jzrlyxjtn040jII4dH\nkkM74zGPbw3uzJ0vYp7IDsIfhcsL+oqAkAVIq7UEPbovCbi3ZyWGwUQR2d3f\nyjh8nH7nU293p0XJfWfXfYF1Cdu7hEelpbQH83hIYkGg2dYbxTOW3JeGCE73\nrbLi2R8zGmoKZVRSPWoI5YPs2zVyipsRj1Kcl7llMLfxdbZaxGNN6AXtNTzV\n4xzN57FNYONx9PCdEO7tm40dHA/9OaQ/NCinMNTUaAtL70nG0LuUkXlcuwvS\nhOVl\r\n=NvAL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCriSD0I0Y/6650Tkkkz0TjQ23pfOU3H2Yt2m6JVVTYagIhAKKlDCt3IcCaRKy1gTxP/XlHUFYbl7Xg6c9Na/AVQB5B"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.0fdee204.0_1612377257608_0.8444122974819304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.5160e548.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-ripple":"0.21.0-canary.5160e548.0","@material/radio":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b5227247d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-KCmLXDNFjAUNAGfkOKluHVMlKR3WkJDTia4Yw8/GIEoVIecEwiAlXAs2jCybagvzD8vK7Vd0eEuY9ZdAkQAPSA==","shasum":"6b71e06e4fc26f975df4770e6d423921be17c263","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.5160e548.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoACRA9TVsSAnZWagAAEAcP/1pZlucvcq5NY6X9aP/r\nbicqt5g0t4/z4oxQR6nxb6q8CGybzCYyRHRUBY2j6BbGNNUf2hLD8UlZURBY\nrb2+QdF1PizLZ3ifR+q3h/76/C9BGEiTEgC3/AU3hoGdM0a6ZEk8TGpz1b6U\n8pgy0WO1IP3jAYv8TPE72R+MTIi/lEhEAk4QpSF3ptxfkw0kRj5XmhudVL9J\nSYoZoLJM5Ln9V/BRz8D3/dYYLnSMIfWwCFRpt7NGARUuAi0zklejdl+ZXhbI\nqaGY/DSaohZxz/K4e7B2dzH+4E9V7okEsB5fSIJtEMI+ORkJRv34dFuZ0/kg\nFMqmEIl2uN2Yz9VJ86h3kHvl250Izd4BgNr/G82Q3AecJalsANpz0+WvC/Lc\nllLrhCvaep5HAq8cwpsXO/1C7HRIEGLNgwzwnd5jzVAAhiNXACGRHYj7yqAf\nieNhXNkI1/e/i4Ol2ARaPoDFOzsfYF8FZg4g3vLEE4K8It+hW1Fy9RHjpHPy\n0Spij5wjYzxsH57JAlp8KO6+2ANIhrbJFKNNIOSFC7wUgwLkYrNpqtjzKZIW\n+o66UEICgmfCs6akpbKmz6EgOnOoP+W5uEa6V5Ke4ic1+A4BZ9gQS+oKndtk\nb970qNth+5OmPwod8V7TpoyNOhRnSwwyGIQpGEPsg7LURsdS6NX1u2SeqVrf\njufj\r\n=uR8l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIER1u4JVdCgVwq10VAUMlUF3f9C6wS0almkgKtfn+hjTAiEA7iz+4ySm4fFt3GCRbHlQYbhtWhTOP+Rx+QLihLp0UtM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.5160e548.0_1612569088136_0.43770963313125266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.4fa2daec.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-ripple":"0.21.0-canary.4fa2daec.0","@material/radio":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.aac8f5d9a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-PG5A8S8wPq6JBI/qBS8a6FKxEqXDvADlRkHB2B1+HXIf/+3hT0+dp7P97JzmL8t8gpDxSHCaMNv9D5ePuNTPFA==","shasum":"d233784acccc9d1310f4b5e00f650b9429f28efd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.4fa2daec.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTqCRA9TVsSAnZWagAAZbYP/iBfXtyyB7k7ZSPIPHk4\nFS4RrALHPXablyNYHBj2Lm6QQzqgRpiZiSxmM/WLjjxWXNfexT/dOPJNYKwJ\nbqjXYVoCy+kZrQbEAiHu38NHArbKvS8a/uRpx5cJ/3UqCoyJKhxrxVBbkyki\nXAf11ysm1BzXJw6sCqAQQxS2mAA7fInk56XslGI1iNytXLtZd7g5EfCpzI2Q\n08xEqdUX+EAnamWvMYXYFhgLKU7EfhH9ryyrA7DXEA3WSzpjXUy+RH7SA1VX\nXZ6rhfTdrcT+Sf8hT96176TGhVTkLu2aIpVWN/6/12u7KghFeKpohbhK0npE\nk9I0Uu3hlXM49XlH8xP/OhiGW7wr2IYKwNSC6Gp01T11Svnai+DY+cZUqdWR\nDZ+ydk4e+n/ZCjuaninZigxqZaWN6X4qi8e97X9/Jpx8kwzwiu+PK3BOf1Kz\nf1kA0SWJzi9cVHt1rYvIhV4pp07WxJHDNcRM7pjCno98r0hBDXd2C1EiF/VF\nUAAxNtuGxjQArJIUWLwvUTTsqfhD6uqcXMaxAva3gYnhERLLQR9xyNwkcPvc\nimsEQikOvU+eYQNdzQ4QyycW3Sw3cc6hnolGatOR0Os0YPcGcmgnMgxunRGc\nXbqrEMFevmdxww2qpwt0V2N9EOBAQzIOxsc3511mHbhkgRirLi5oH0ncuCWj\nK1XQ\r\n=E/FH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVNip3a291KMUsmzlpz+BYCIqdET/2K5p4Bo1yTL197AiEAzzghA3X7pyyDlt9CTTzE8508K02EsqFv37c4N2j8/t8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.4fa2daec.0_1612829929653_0.6361460248008433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.67f285fb.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-ripple":"0.21.0-canary.67f285fb.0","@material/radio":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.750e18fc7.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-RI4NZWk5e455MJExj2HmAV+2GNe1gOhVsEsms9BVfPKtL7bO348lgnMvYGaEGPYjCRAHKM8RhRDY5vk92GKeGA==","shasum":"f06607e8252176de9147c6bc211016ed8e1833a1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.67f285fb.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdyGCRA9TVsSAnZWagAAdKgP/1ZJ4itVK007nTHhe94q\nr6z2Qjc3+lh1pi9RUSgxU3UGSe2Egs2tR3/N6uO4w7K5H19rtxBHhD8d8Rpm\n2Y2taf0XAp/THnmWERrxM5IEnT8yCPRKvg/zQ7JnSLABB4P+fqigaJPvpHwf\nj738XhFLe2sgFn/7PjJtl0XF3AEW3xL4EzZXjFig55CKMG/IoxLjql4k73/t\nAqUAF6VkLCp+fnBk7/rVgyrjv0kGU6Bt+/9wfOG+DJV1S3yEBvr6chOOM30R\ngYapVccEIMY/kZ93NRmfXfBrJ1tTiyQHCC8l1n0TcGynzA00sqcAiW6XyWF2\nxeEyrpBGrGVbW4LGxOsoJU9BKmy1ZLdedA8IxFMb1bESYjvYiUjlN5OMRSnK\nYh8N1m2bbN0XpcuYCRkQ5/dOMPu8YYC/T+9qB7SJTE0tUpcUQHFvMeTXmor1\nKcR5VleFG+QtfSS/D4nt2zK60zlhmYGBJgEgSc00iV7Ikwjk1MPHp1RXu3r1\n1rN5E5Hu8qaz26AfE+RDvk1CHNlBOygYtnVIKspdy+Xf5FPLln7KA9ri5NV0\nGf8U6XV/soD3KFv7kzHAFV1L6328OBFgZG89AJ9zt9pofgH/jFNyvh4AyMIq\n/49K6cUvHdh+ygMQsxbTKHIGrPwwORa7E5CvnddF+Evlwi6KXI66RPMD5vTz\nJFfH\r\n=FOQL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDpdx6s4+6Synf8G/xleflOLfc2fO8BYo8eI+FvMGB/1AiEAlakTKM0fOSkMQFbEo4gHS6hpdcEVVLSYKz/mETBJ2VE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.67f285fb.0_1612831877941_0.015310342499532004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.58cd5a70.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-ripple":"0.21.0-canary.58cd5a70.0","@material/radio":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b62b1266d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-HqlUMZWduJ1+8br83I+RT4rmeS6WZJzIbJerf8RXnLN+2z33uEVd4Ro2UgPvrgIXUuthhd5fJrWGAdzeVuNhpA==","shasum":"6a933280f7122c236ded1b5c205185ea241146ac","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.58cd5a70.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdgCRA9TVsSAnZWagAADw4QAJTgvkHnbBOVXVG7JeJk\nGnVGWS+RPsK+n1RIXj/z831uUI/kBA5fIPyz3DhdWIom8kte1vAqEirVvL/n\n0zvEByfuC6A9tUBu/wx7ptwea8t7p/tqg/qJlG8EiKP2jeEZfHimKBsa4yNu\n25uNYE3Wvox7/qgpIOx/kz7rwkQtbwy4+nEb5ea1FIqVqdPdMEAPA1zeDbvT\nM4LfqIDB2xzjOOXr76A/kTT/x076EOhHb9VRMEbJj28VcXJlejlmaqxr06Fg\nBRWe+MNMBvJwHa/AxI1lVXI0hQTWuDcURVVSLmV9r0epkh1EBueA9fI3OBFP\nBvHef5usPsz8jZdH4fk+zNr3LbqKQnHLvtj5MR9aMeCUQaPYZDnlyqqdHNom\n+7NWlch1RqMIx5NzIflhvtZqkSCwbuNEkJN6VVjHwtBTsAZWySLGJuzu6kJI\nv4ImSL0GZQPRnmrVNMoT4cW6orVMWjFfy0sdToZNEJt5VNtN2eXfPfwm/OwV\n8K0MjlqHKaM+DqKV42H9B1sDePEQg0ZEauY3roXGs42FDxOsM8Jn+EiFop8O\nI8HpcDFTD+Bi64xefnpeoTpXYMJKK7NcttN5h7w7gTskbZ72V2Fl6vAHQAuO\nvhaADET1Xq/uZyZJw0DoeLbMgXYKoGU4dsoF3sE/iB3w1wlCv7XCNgBPUcIS\nCgob\r\n=mq+i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM3LQPCHr3eCbK25HKMkIknYnztQJKY+mLRNGeZ5XbGgIhANFMfS4b9Oo37gSpPwXiFKdmkunJ4ApOSf2DZihBD/1w"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.58cd5a70.0_1613076319765_0.5542907297023949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.8107ca43.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-ripple":"0.21.0-canary.8107ca43.0","@material/radio":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-YKotmewGa0As4JjrK5dokB2FjyeQ/IPPHMuUEEHl02CdALEHUW5gK6v3fXwVqKjRlnkg6SEcAZbkrWRimNG+kA==","shasum":"9196802160a27a925f813c48259c0999fdd49e06","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.8107ca43.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3FCRA9TVsSAnZWagAAIg4P/R81hhBtjoUlVkUwWL7t\n0Cg4fOmJzkYsg4hPhJ79VSxm07EUVKkby4sy/KdA0pq4TtFzZsnwVHc2rgO8\nHFDaamj2Tqewm9ew2w0v2UPiVty9JRyaCJy9AK9aPUh9klhg/iy1XNSlE6YC\nW7nNaHa+/rCoBxafRBHdyp5hXDyYnzIcZsTxjO5KihIJq3C0jIO7PPoDOath\nAF5H5sl3Wb3w2AhcLQx2iQGkBBfw+lsZ1RYYn8oH3e4NTcZTyIZcHLY95oO0\nrsjBwnkBFqaDy58Xi4UuyiuZMRnFH4XnOpGIvN/yKjRNceVj7ijIzg/vgOai\nUWntNXkmeBy6B4DazKm2Cx3g0W1v5ummLQ88djdj5hEnDsLQLFicYUY6KJGX\nDr4V/FCc5sZzj9APkNjJlkCHO+GTHW4PPqZwf2RXDlsNoIQH5bkDieS9VAhH\n51kComM8SyDra4Fpy8cnWb23r/iNZOqCBUxmrBXEIR7HJTB0W5Uo7UUOAWpT\n186UqeFKKwxGWThT4lOPhx7DXEI0+HUPAbXoNU8Tr8ufyoeN9idKSMLRH+EF\nEgdBzaBbHVdiZusUJgUgxNXu4PhPlu2qeBXNsls5iz+4dudBNYv94MsS6ehO\ndL1axXvpb84mzM9SX0kpNKO3kkhACCMNnSGLCDU9A+wKf7J6s3BCXkzUSXGw\nZPBs\r\n=rV0y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGpRmj6dWF8WBYOowYr5OxiPRkWbA/Ulz5dVe+SGh0CAiEAivt3vv3mdEoHXUIo5DpHV9C/PvRX+c9x2lzG78M6hT8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.8107ca43.0_1613086148906_0.45625967514042887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.d35d64ef.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-ripple":"0.21.0-canary.d35d64ef.0","@material/radio":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-kxSEU7BNCm+vOzHzTrCXLxGqCR+PPx2COvhOvc0qZCiWheAKjurhuQNKQZCWgVllmMaHnkBrVWNeSVdlqyW16w==","shasum":"995b3518d4794f5bb38b3598acaf39c11e5d1517","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.d35d64ef.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEVCRA9TVsSAnZWagAATHsP/j92eR6G3gjuJHZU6BsQ\nIcR4PDUarFiqMlh6batbxBJGTPue5YGHj5DDbMzBRaWs1h6nU/FzFOJgCIV+\nxxGau6e6Oy1rdufrrdJa+W+v7OuJZAPu7Z6expeCCQTfVnWBdPN4uEhKJK4x\nAH+Nt6V4euMp8KMJzeJINu+6rmizniMaLfrri3GCMqP8KGWts/rFP18n/vtf\ntWXwvRSNtW+cx8F4wQdoa0LrHjbdlbNzekVp8D3Q5bUmT8iHW9/uwx7PO2WB\ngNcmXIJJpp7YUoOQTSAR/cqZ90CGwE6PkpCdXPtI1WYDbJhkL1suK/1+JwEU\nadyZvWSQVtx6UTedkOM7sI0PeoJ8bSlBQ/cVvF53d+gIP0YVTy5RaBUweLnN\nBmbIBxNgW6QwBdWkZJoXTPqcA+auvW5BV6DbJ7PgOsQv9RxyjmD9YpLHvA+M\nUYLbv9CcMrfpkrU/NnzswO8ErLuZNRyTz0SJ+MDvginV5XdPNfg6XTbLm4K3\nhUJ0LgcP39bZXvlJRUmG1lB8DG+88tJ9FXnSVnXJE8C0DIPvXMUgoorE5UBu\nhuOzBcUDk95oBQQnfwdCxefxjtaOoUjN0zG9NIOrm/RDsuAPTmYTuW3FHjJH\nf3pllfGt3kMm/NedQi/tr0FTVVLcx4VLvYx4gTOoxtlVJ2zJEmzzQpRBmuT4\nnlad\r\n=KANY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+RQSfukFrlklOWMqwSdmQd0btJ5NhV2E3N3jLnKrstwIhALN/Apct5fJvTKPsFBGlIHjHQmtLXRyu2AreH6AyYSh/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.d35d64ef.0_1613086997213_0.5347711571191114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.78bcf058.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-ripple":"0.21.0-canary.78bcf058.0","@material/radio":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.a6b3101fb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-br5rF79QybM74Vj0GK3gFNibdsdDYwb/jSbgTnVr+2W5r6oNqA7f73MgPAL20zf7eqEnfb4vZ8VgEnlHL07ZUw==","shasum":"124dc3f35058f40b10947dbe5c05f523c11612c5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.78bcf058.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBiCRA9TVsSAnZWagAAoSMP/Rmlj2sD7E+AWMS8S0rK\nmHYUcHQyscJdvA4cIDPLntRTz5PY0gUer2Hu7hbU5BQXqB+iaMCLY4pIv8NC\n+ls7sdCF0YzrDFt46EF6YMK5aVdMZTQTTbnOsNjr3QBN+4CHnNc78tn9xo16\nJe3AbuhWZt9LCtpwg2l/SNU2vaSWKr+9SaGHpMfBMbqRhiA6CDMq/3hzdBsJ\nLsXyF6UvRVMImEQ63mW/4CsBGew8j2OF6F03Je4gwUtYCgQmbfsuYD6c3REI\nj3aaICsEHCG9aF9S840dNRsQxPN2542XqqFBszwUXcjCKSj0cF7CxabszEtD\nuu8WzkfOCr633t1eUkLAB6FvOTew5S3dULHwQoo2zG0J/9RSF1vGdvcR0Cua\n5CqduE4XCFEcdbB8cnq3PGGlt+KJz2YOdnkSzE+vP0nw13ycpfa0/Euiaoad\nREdQ4sRDz3+2tmO9SrOZfbyazoY9R8r2Jlf/B8vt/SZNWDifa0arHBxfuwcm\nrrCwHvoRpWoaeRN73i2dC09XTbPIQiJ32Oi9Bs26bxSttkdEFgoE0lXstpnU\nOnKQw0o2a2C7MBJk2xcgnrfbmYpHGRDpS7UkhBhpn3REtF2hC+lHfbGjQT9y\n05/tE18CoIBbA0w0pdoY1zVKwpy9wQVuLJCmodrO7oOXAA/WMSYtF2/xQxO+\n5AZB\r\n=WmEV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHheIu7v5bTTehFp6L73IC9/lQTNGpxAfxZBLZlWqO9DAiBUrz+ze5MzQudIjNs0WPaRbf2BuwUBzEPtl8qiGzmSIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.78bcf058.0_1613090913645_0.6505622499553592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.0c6908fd.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-ripple":"0.21.0-canary.0c6908fd.0","@material/radio":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.ed88df700.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-YQ43xeCuA7H3WUUhshp567Pl7bgxXNoo85imdIa4TRiReXUV+xDwPj3NzLESycVGDHcKD3SLAsY9PzHnFY9LAA==","shasum":"55b97d343302e2fdf6370397662a512a8fd37129","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.0c6908fd.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjwCRA9TVsSAnZWagAAqAoQAJfdvvPNKdeCjmEElFjY\nFHmiPk3V4ungO8hlqLCxW4B9UqR6UukMdKFs4v8RqjugBUaBSMni9AMGzD9x\nNIfoI9tegtb1oqyleiRqHsMYJXhQRah6BACquAtcMxvXnWDDRYNFzlYUxnJ3\n8YqW2+zAghk4viTC1D+FL6zyZhCKHBxbGl3kDNGnAZhrdt6Zyr+Qrunldyx6\n193q7TgZICN77dxzxs6UPXN9DDZzM1jsG/lbTbuMDNkmZp4dexrVq9TE/SlF\nZEDQKEC6cEjPQ5ZjjR1fgEs6bGiWxyJgdKkway8rA8UBQ0amlUZlrhW3+oWH\norNyBeiSsPi97lYsRQcumdpzDEYcKgW038wGC9iLoe6MNTR1uiON9+D2OVoG\nqaX5Z6iMXS9BD7YkzuPA3g01gOCAuqcfxieOPkt74guZnOH327TSpmcn3syI\nrvTeX857t6eww3SHdzatkKL+jNmRy5O4P9Eict3VD2y1GgpcKFkL15n8UK+p\nwBUrkpYyeoQBUU4B5XTCJ2q2fqk/Co4WxBknndmc/s12QcdVF8KHdQZ0d7ql\nvYcXHaEF/81paE5NOGt8LpUWsHGjy9nWUfYmpY1rmJiea93amRjfQwSro92e\nGM2vvOJ/WnKG7fXCEhGMwoY+TP7ynftqhuE1hotqUFVRJbyweKuYVUO3/yTI\nzapM\r\n=zaa+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOcs3ZjWHXnCGPTb43cdVtuVGgjqaoQJsXxlXtMWn6rQIgDA4CQTOggN9zGWXhSPqgeEoqwxd8jXTlBe7CwPKU0lI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.0c6908fd.0_1613093104094_0.69506087585319"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-ripple":"0.21.0-canary.f1f34ee0.0","@material/radio":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.71fe9a067.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-HZJn5CVGy/01Xjvx7CXkrby5Io3cXlg2rWTrVWuDPYVjEHAu/XIitSw4aoVMT+YKqNo5oVkL5Cbv1vKJxa+OoQ==","shasum":"665d32a96be1ab6b6353711dac0f4d71ec20d803","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.f1f34ee0.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKHCRA9TVsSAnZWagAAElMP/RcqTQ7DyBIiPOZZUvDN\n4xLC4mQtj/Hsgq8ARP3BsyFj28BlAlxZz4LLO+WKpcVYvKTa9oRAZtkr7x8x\nCXxcnG52XDD5qutQJJ6j0Qt+mUxh33ceVIug2F4Ps3jgdQeMncop7M/U6OH+\nkjzhmYhHGKfBIgMsW4CQ8Vf/ecoKTsck8bWCxRR24Bj4dMM1IN6Nb1H8qUcB\nQOsab29OQsatnU6XXLOgpcPmJANf+xFLNr5yU2+7g56D9GsIbq9Ms1RfuPuS\nSCe/2Om089uQudL9V8K9IvMvHVm8kYV+mIOyqF6CE3Cl4iU46WwGMXpsBT0C\nUuIiqPFnVZ1cHb9A4/7Iguqu6PsiJm06SQT7Wf96Vv/cChaBVIMmIW9eC4mb\nbX/RU5IxuDWqBIStdtiT6DJWVtz+IIYDDcNUauWMPyOr06HWBZzg2lHoVzts\nyLDvem0VcoZOgl+ulk6ld9lWQ1qkQrcvrUxYCfQlcdkcXrIxBSSzvdYNBpbN\nmPg6qanVvKdTctGQK8ryJczHnj5T70w64tu4PfGuMAJD6DFMQJ5D9bvTDeZx\ndwCNbTSQSRMZXloKbaNmfADBdaoKq0LDogaFoaN5RMvV6TGOhDcd+nDgJD1R\nFUxBSXQdrrv8XrG0BovDwy83zeQ+tX/+ivuMkfgxugTHA/MP6msLb5jMK952\nyu2K\r\n=p6Pr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVPxHgSYLXD0BbztzTV76M4j/kIfR1KS1G/YQYJSyXcAiEA5dz40IJzyjBO7MDPNrsQF+zD7dXUhtlto80zBxBWOYE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.f1f34ee0.0_1613161094457_0.8153153480154978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.d84df029.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-ripple":"0.21.0-canary.d84df029.0","@material/radio":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0fd56a86b.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-MV5dXmlh/njD4Y8ICN0+BaELFZxdMv1fO47nt0ZVxZVmz4rnm239LyxGsOq28SWqD077T+5vK/Knc9ClUOpOhw==","shasum":"eb6e59d6a1dc3508c2b0a60898f61784534dbaf7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.d84df029.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgkCRA9TVsSAnZWagAA4vAQAJ5qB3EwP4hSQhY29mOg\nHcCWqoinm7YJARuUxiHnnPUUY26YMRQcL05uXXco1DI413tbSymbLzVJ9XKJ\nG9y7DE7hyvhph2PNLNhoA+BQwHnJKhSRdHhVRf7dJIS3c0QP8/1XawT86Hh1\n1LBoa5VSwE9AwIHFyjxm+mSYW9Fup+NSOyL44IOFSi+3Cl0QgLjZz557jwOi\nVTrVpLCOUK6ZtV1Qo1Hk6gsEj3n2s4Rboyu3sIQWJQ2huBnj6eRwTV2KsOzf\nKAf5zgxC5ad2qI0vFgRYtrhqFFRpYUgpcvF0YO3LCiTPoO2rhAKaFFPpiVzE\nHitjj8//dAOVU0gGrcD0/nE01Wi7rYh/QdPODQ49I2zqtNPaetYWI1jN4MA3\ncj8XjLrX33tkFVeJT+zSYmPZ9a+pCtrT/SXh93pORn4C2RD0OMXcrMMkQoVF\nDNSmSA4UcwPH87Uq3vMUaEE7H6pBVoWsEcKJk/7TDaAaVg9TRnQVxjsZlmCC\n6BVPfPxBQH9zlTdKFz+Fgw5hItR9ZgAzoEgAU3LIPevsK/C/6FQP6NDtXp0V\neV8ic8lCErDvD6X38+8+8MQX9GAcYn5vWrM93HA3WL80blDZe3zftG1WpPFi\nyrG5IkG42UxxbHWHvCvBbz7XivEcnk2sd4caTZnjm04CnR8pM9kHbDDZksGW\nS9Cv\r\n=vDtX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXdNQJoiXr15+vra3d6AMfHUxwY2r+qQ1WbTt75301kAiEA90lW1JBEm1xj48jSRgMaFm+KwLZGoahG/A3ZEaNebCc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.d84df029.0_1613502500336_0.1107512460487794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.c525f471.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-ripple":"0.21.0-canary.c525f471.0","@material/radio":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.f9cac96cc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-xKKZMZn/LerRnkbngunQoKW60QdDZJ1aOOqf+RMYZjkstXE/V7yPrRhJzhfPqzjDoJCaqa8dsOXebfQTn7WS6A==","shasum":"90279145b7b2f8cc435ba8290bf4b843b99acac3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.c525f471.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJXCRA9TVsSAnZWagAAtagP/jG4+RQBknIvS2s2+OCi\nWkXQ6BzN/AyCKeAhyeQN7SkIprULcgMEW8wfRf4NVP5Q12ugPljupgNPGKQQ\nZbGMjCefL9/jYgyVHCxKx8FnWs4h/qx5P7kW3iqacHx8cBVPXXO7NdGZ+vhA\ns9vLYTwe3mOgU+twWD4SDspuupxbRh+2Q6145zk9ZoxknJBwD0dXY/BKUZjb\n6m50W1RqWZUu9QG3Kk16u2LesokoWzNSuaTh26MRzBV/pkRn9/WXhVHd6RKo\naw6FtGFV8+LKFXPVoL7Bv9hEvbXydtwPZI9EunwOY74hmH4voEKVvtj9hAk5\nSu3xZjYayl2A/PXIBc9gpWcvfVy8RXpCtvRqy56ELxf0++E+noltniV0F4gf\ni/uPYUSRJ1lm2AMs0iMGecMBMuz8a13wGXfOsz38HTW8bIK14yEIzJsykNEP\nYOyXBM3Y0AFwwv8FH3pyogdvzF+lEWCk/TEJkAchxrBpkqae6nxsz6qzkVrR\n1JjpTHCJnoGGM9rmZ41g++SlKUln1Bq7tqibHGs1NtGt8odzSGLdjv7gBEQX\nRIWOjJP8c9SaiA+AwvuxlAD2yE5rarwEhAESOHn17pAO9D7SybLjOQKVmU6y\n5YrPyzwmH7WGrXnMKyJh3yjmtALThMRQkqyi/ykFTot0V1Ng/Pgxs/49fv9p\nNHvJ\r\n=d7Au\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfKwr5hWtA5YdJ+9dp/GqBFCemMHH6acjj7t67MTKIoQIhAMO7O15yzaROfmGN+DJZvO3JlO7Bk/HHv70kSAr163by"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.c525f471.0_1613595223044_0.8711264216765062"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-ripple":"0.21.0-canary.ba7a1b35.0","@material/radio":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.f9cac96cc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-fsNHqRDCAUeXlSrK/ox83DSyiwSfLEgrTmpcY5DI4D/fz6U7f+SlN69eQXx3heriCofAiEbmtBU0uMmUkuqfIw==","shasum":"9918a0a40ccb541f2eb6bcd855bec48c0ff119c6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.ba7a1b35.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLOCRA9TVsSAnZWagAAz5QP/2/YXhCZn1MheGjbiBEW\n+C1XRB2/wgdofdmvnujnDlYPAiJJX4YijLtet4w1L5iJGttX9llxpVk8ILYx\nLcTtCmVq4LjvEUseLSj2gFxMgawkCAOm3MwA2mBC/G5ywppe8lb31kc5ZQ48\nA75uZrLisdkiWoGdQ9FF6M0lD4dM/4mBvQlYRasC3LjYSVK0ELCCVFAclDqH\nfIxzlt3a9H2cwB2w3xrhTw02Od3MyYwB9csDCIttRSnnigVLhSsyBG2cqvq6\n70VyiXyaMjREb+htmVGg1D0vQhWhO0UIUJBz/mIIGxBdQN+aOFEehenQjdJd\naRaJnz4DT5ykWY+GW9S2SULYX957ie58ZjQDzCgRTC4HeValsHOBAnrj7tO1\njMxsH/pQbsE46NdtcbIDxSB8FA7bwU7umWnBBOnWDiDnFP1p5Cok1atz6enc\nCnsFMMhFBBPj+qcfTkoIGkHKTlsHaU2XJqVW+YLBY5Qr8seTu9dnxYmFgYPM\nryC8mdmkTLxCI4BfHceSSBAYTE+fP7YzySsRhOgh1/o3YthyG09Z1x+f9lhx\nl1xntk3sbcnuDrj2rNTPVA/WXs2o4LNbIQDWDTH5VEPODk+j+J70t6gj82/w\nvpwtwI5T/SWkCF9ZKJoBB3GdJscKmA0eaI2j2spHMmJvXkED6L5sikr1jAA+\nKNjp\r\n=31Sq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrGIflQY+m4hPkiNuGWgz7oCyPLuyRkgLRBq/UunQ5/wIgFIsEt1YTqkuVPCtknOQmKfGZWMkStozXcKhN7+HSu50="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.ba7a1b35.0_1613693646044_0.5188372321061883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.9a566dda.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-ripple":"0.21.0-canary.9a566dda.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-0Kox52CRMOSX7ugufCnjtOaxMGsDTw8Yj5Fyngrs60tfIJBE+1IUwiV7lbw7bWmedpUSpmZS3A5YFNTAAR+EcA==","shasum":"1b2b027f2d74a8527ea44f6e9879cfd63a403b70","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.9a566dda.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWYCRA9TVsSAnZWagAAy4IP/R0ZhtRW+9ttE77eIH0t\nLyx7U/DDd9wJvm4JxBXwpUCbfB+eKm4qFK9zSEyz2ekOK8vdj/lQ5KHPhp70\njGCIzg8tsyCjAenWEFd1DMIjGUq4iN6hj4JTbjVGwOcoz8UUcnb7609IUQLC\nNwbZjICMKuGdPtv1v5Xo5nHWdfag7vptnsJ96F0lLKGf/yxyj8PU22gyozph\nNz5r2JkRA3QaG2FpG1+QoarHdEox9/mqwpwi81yZIBSRwPR6qELYPPlogvC0\nEFamBaxlAF39Z851dfmG8bUvJg0ftRqUP7lKyU1JOpvyn+1kzc8zlOHfuPAE\nmSD2Kfhef56TkIJiiOaF+DyFQPpaBVoyLEuTO7yzSOhGTxkynG3FR6ICJkSx\n0t2l8yky6UugbCmI6ykQHb7/5vHhfG8rwihomEj/DiZowCneMIHSpgReJTlR\nP0RAQsMkZc0b/LgWVXf22BfHi3VvPCKIe4msMRxXp11DC+hyvOpqky+XOk0p\nIJckUCLajEtg4m5n0sR9R66IsNXDzef2DIlQEPHAL7QOxF2rccQnadeM0X6u\n11JGlJfICR1UUivmSe6ZlCyEhc0EbuyGhnmsI8BWcbm4dzNLmsyL8m0ktblJ\ncbLy3w5ROTEWFfslMMPOwH4jPT0SXlDP1q0nVdbiicUsnbSfchmpiJcEepPJ\nd7si\r\n=4Zuc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChPq5BqLsvwCOpmvtTWK93OkkqeiyDJZ5zOfxvKBysvAIgMz/W2+nuIrbKVx5H59NinoG9KTfQ9t7qbiN0iQd0zq4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.9a566dda.0_1613759895785_0.7305072956348726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.55addb8c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-ripple":"0.21.0-canary.55addb8c.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-YL0SvykWxP06GVZxIYg8PqfuMyRlGQSeyXz23Sj00B76LcJbP5ZDEteAmEEzs3CG2Xzy5gqMJTCgvDwYyO8gNA==","shasum":"26eda1ea5ef31e601fd3dcbc54041c943ed4e9f6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.55addb8c.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDV1CRA9TVsSAnZWagAAubwQAJmp412+sXLGDgq4g7x1\nBb5Cq9KTC9K/JEROw6uLEeb8T6TadQhX6WXKo5DuzPZP98h0YBdz/lsBqUI2\nEdkeBBITuMdx6xSI8MB6KJqXvm/vwSGEAMwkr+vQ9Z6w8dM02od7CSW9gNuY\nXQw0UrajZChE4l65tMef++R96UMJb2AF7wEFmiSUDxeVEHw003gmWq4mWeFa\njMzlvmtmYIYnc9IKV7dyedIckZevt3FiqIQ+MnknXxl2DxKqbRkXTD0JMGTJ\neZxFUfKl8m0Ak/88pLvMnjM2gieAty1I+l3trl4wAPhWro23cGX4OvOTxmln\n5A0vQH+R9L3ftiM/owaC2x3QFWHol7hRggDSxbYOqPZi1ob9SB10uIC/E5GF\n8SGWs94vle89VlZFCBhAc/2FqjEPAPgI9kYyZXQqoY6iZR0jypLieOPrZNDx\n+I219RTP3zsC4VUyjZWUZV8Zrc41BU1pPXOTPWwsx97n0htVOa7Tw05L2cLp\nJhkn8Ul7ohTNuvPvJO0etu4ZbrZfK6k3ziM6Nt1LsQ829BTHWd+cqL7a8GZ0\no+MmMaW5hDakIeWZxYkz2AmzDZE2DxdXx4LNVkjz8QwYzBNVRSYB4SQXyVBH\n95ltpaduxbpOr7shejY3IZ9DYfgAVJQlI/bbeZXhGV8QfQ4ZgUYHeyGgBzKG\nMNU3\r\n=jZ75\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQLJ9FBtMb02jw4Do4hAy0qy18LGG3hS1PW7DJ74fPUAiAYf3w+YRzjMcHdWTzlQv+mm9lB63Gl6C5lNuAUI1B3ag=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.55addb8c.0_1613772149562_0.6543995544722074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-ripple":"0.21.0-canary.85dd5e9b.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-xP59E+hAUEetiX0h5TXAIUheJ4rMefFoMUStnrL7RjlHjh/fxUnLXiPqVIPQ/+x7UgLKJ+eN0HJeVV3Ruj0dgg==","shasum":"77e8e305a809d69c94d65f6df0dc0d7e46c4d97f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.85dd5e9b.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYzCRA9TVsSAnZWagAAGIEP/2RTS9xxTj4v0FquJ+iu\ndMlfD3J3bjStYZVLjyJQiaxoLtUj7YBKG0S8KKrvSlFqdW/N7qC1cxhirOsw\n6w9kZ3A4UsNWPFjfcxzR2MQki/+S4/wGL3qBpYlqJHxGQpZFDj7REbcTqcxz\nA1dRzBslc/MNl+bDBFTX1ZW/guGnYuvUluwLZv3DRdZSfcpE+gnhpGqBT2Ul\ngyuRejMOqMdVXNat0lr/m/8lgSZ0g/R/bzR8oDLYsiXRQ4/nw0LgSi0Q1fdl\nBPZHd0V/wqVKyDFx8jeVv/SHYxnFGWa/ulTJM98zWVZw2BakI3ji8px9UCwA\n9N4c3wnfLPSajnidsxbdJjBAISK2QEwK3EWZruSfTc+3sdMCSOgcPvECj3Ju\nNf7NBwMPjSWB3yONKOSzkNRDEmD06pi3mQx9PM6+0qFukXUzEIhyRELznVRt\nBx+zhNzrpDOfFEva9/DrQ2Xe2VhmsW6b7ulcqrDsSAIP2h/wPe/TDLiwZ6pF\nXlRyEq/av0iaKEY5IVQWL7CjhTA1h+sABaY+4lVsKRr2sO4V+Wkgxz4WhOyp\nt+/VMiuhqqqIKg3/NG94aSCDuf28haWb5arlZQ5rmIL01HMwpF/fCSqEfzBI\nWlENRP30CQc0Yzb2qq8Onuq/ylscAc5mOO8Yd8ZaPGfuv7IDIh2aSGOqeZfC\nhFfC\r\n=1wEy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2HZB3TK1vmrQd2351o6YNWRdQalIYYblCcBRipOGkmAiBKUGfVgK06Ipf4D8OcK5mQEFmmUIzqcCwC2Sr1Bomtdw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.85dd5e9b.0_1614046771278_0.3792561799195988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.aa3e078e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-ripple":"0.21.0-canary.aa3e078e.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-qHxh5Mz+U8EShyxw9ruUyri0Nr3G/97NcMMPeS+pPVczb+1SaEDErtXlosmQilnKj5U55WsrnIsk+AhCrWT2ag==","shasum":"96320367ad7613aee870ea40907919df58367486","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.aa3e078e.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgiCRA9TVsSAnZWagAAxIgQAKMtRDDSblZ7VUsZ/3Yw\nXe+H9XRG3CU6ZahJm/4QjlzKz5UfXYq9xCQUkJeQMYJ3vHOdVrK3Mu5wu1Q8\nUOnrsPoEaqeOUzIGcx1SlIcr142Ty27H27dYmzzgQDZMKevcv50WC42nMWaf\nCbFdo05+uM1PC7O+IHE8VqLfkiOHmQM4bOzRbl41vAWhLwEBGW3FzLs+5ZZW\n6jhSfoetSETnscaorW9P9XuH3waWVKNmKfw1VDL9IAv9wdwQrlYnRLsscCIc\nGy2udrtLPjbSXPv52UqMqX+kBVVIYfK1HEaYeyEm/2KM10GDm5Js9yZZ9IAO\nsZ12iFAelI/kghitcdOzQU2/87HDqxgQl28gyi1RC/DOGZrp1b423R7gt1kE\ni2VAA7tWrJWoYTB97VhnqPzQcmK5CVTBjhRbpW9GvvubC/b3TyPMc6rcf3Hh\n+B3sCIgSjQYScog0hXzLpmZUacSDHI8E+z+oWzl8OP2RSCD+yNlvT3BKnMSL\n1WYFAg+HbhZnP1eEz8Qz5LPA4r3bAAx4Pd3TCMLV3lfhYT88gVIlyENbt8FH\nM4sX6g0dBz6dxgHwAfiz0fMJO9r+B1Q02yE4rQ4Pro0+hQ0v8ZIj5NZjlltw\nfFL+JiVNas3NaU7eWm2cEkXih5tOGmNbW6R9ftZmZ4I5NdpB/80M6UXlmQ80\nZuwJ\r\n=SyBr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNjFP7nu6tDdMsbMnAMKZ+PX5l8ZAYwXwrxa86k5X/GQIgdxQqrKFvqK01dgPaUjVKP4kdQ1q71DiHzkAFMmjEgt8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.aa3e078e.0_1614100513886_0.27205537366475907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.dccd254e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-ripple":"0.21.0-canary.dccd254e.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-jfWnbBab65MiIK6GofFd6ETsATpqKY11ArlRf1nR41YqmdYOmuJ4yyfyG17dzy2G5PUALh8sWii2B15chR/RRw==","shasum":"4d2b79b08ee16352235b24e79d930550081b1012","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.dccd254e.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPCCRA9TVsSAnZWagAAO9kP/0qhmJb6rPWWaXUbWrI8\nO3Dxq7JEaAvTMr/jFbUL2TGq6IS+DPmvLlJ768K/Hb9q+VHMKLtJyYzpc9Nf\nYwXMtB8yWzUUJgSVcCA8yMUbg9oDdoz7ohLorEuy7BtQ5Hzw5tZXa0gp64II\nA4q/CHr5we/lZ4gJrdEV3BtMTlP0ufRzi+ZCuW2qvNA9UwWHcDkRnB2lJUb/\nwxf+jr0AkaUEjP3loxD/WQNQ/uYV1xL4Lc8LvAcKkzSYRVe6bL5+yjdkt4o3\nFtsYUVSU1w4x28vE/JOTLrnY4/j6fM9xP0KnsPyNKivS39HNKD3KRXESdhq2\ng1IICwA6YRbM2i8H5x1YUHQ9v3Q7F/AWUBOzmp6DFREmCzyTwop5yF70ttmg\nCF9sIR68J6eomFRxR3ZckbU/x+Q0DT8QCoGadks3Z04qJihVXlDL2qhPF7IO\nADENR0OXoOg60NITXUmwJ0Kr5pI620uwJwGh450uk5fXn62v+0ta8WNR+ZpG\nF1SOI0SfJRoDQROyIQf/YtdO+VCoY/jqI+feTTqXcxXl8Z5AJO4oPCOEf4nD\nJPTe6vRQ1VzvrTcZNLhgplAgXwOx3yd4cjYmwadhT5jahAZfmBlykM0gBLF7\nJbBJe2LOxJwlsIyml8X6sGsH1rd7/txXVH2G3bV6wIUJ6GMU48tiX45GJjZg\nVrX3\r\n=VwO8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS4xHK/l11MEjUtiqF+VhOEYHZACsbvJyZJOoTZQcfhgIgdi1hFcBDheuMWYYMb1didnL6ICAlGYrii9GaSgvZYl8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.dccd254e.0_1614373825555_0.904357967403089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-ripple":"0.21.0-canary.7dd1a27d.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-6OxdpAMG1SfaoKC2itmPKq91V32PNHd9F8R7WyxtbnWVCKzazV5geXkp0cTH5gBvDRIk8AGEzp08wIS84ptEdQ==","shasum":"b3552d8644250f8943794d31d0495dff5533b645","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.7dd1a27d.0.tgz","fileCount":18,"unpackedSize":100025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQxCRA9TVsSAnZWagAAtPsP/1TS/OLnKY0DUj0souoJ\nBcrU4Ej8lw3+ovbQ0xqiIm6Ss/XnQVCR2wGin8MWX/iR/qtHCdsDR2UY6gCV\n32ZhHQDf/tMycEj7HvTviKy/2siNqqC+z69B7GLBlbbYrxKXz1jJijbOoOYu\nCPACckmhixQNA9fTHZs3Mj7mJZ3tdBqRD7PfYeBBsnCdaHKbENr78IUkkNKG\n+xrPsbNaOmySjtS1torAGLK9Jk0wJUginpYMFkSP3b/ra+y6t1yUM3TA23fh\nfKSlMQd15YWhrTm64l4/0Y1N66Qp8pCbz8Rp9FyLXKDsvt0f8a+WIPhP3het\nRkRqN24ZLbtv174ZfkVbGsQzFQvXpD+xa77mmBqV5IWPbhr3OcHpuQ9O6CVX\nbMm6z1O1dhZWz/byyI/GSyAjr0kQtfzJQzozlcxIsIWg+9g3Z0sMvE5IzVkF\nZuN2n5TIBAOaRVaxtgo03qHJaxWdCELY00WDRisHwWkylnstuL44C6rthEap\nKtcOcl/YMg27em05TYCJyo9Uv3PQL8MqLLMri2uHlzj/d9wgBbszMtZSaFfD\n3mFh0YekNGEaIs2Rgc/6/VA091eMDS7aPDErnovZ4Sv8OpgGlC4KUir4ecuH\njxTelzOEjQ8T79qshvo3841dksYLl83USEiYdp6JevCLGGDct90bBJ0Q6QaI\njmDu\r\n=y9o7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYJuS4IuxxDjsjWN19I/Bdo1zl41hcElw/gfgqy0xRbgIhAPFORcCVjr6hmnQi/3gZ/2mPeDgU9mMYbHvaxQuvEdpR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.7dd1a27d.0_1614636080984_0.15913845878648214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.12574572.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-ripple":"0.21.0-canary.12574572.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Lzg7uRqGaSjl7T7+2eYuJSIEp86o2X8tl2P+JFcGHqOFbjP/3NjBa2crcQj9V/UGig0PSl5LQ7wmF9L7Flm06Q==","shasum":"7b98fd91e7544cee3ca74a967bfa56de27e1536b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.12574572.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAyCRA9TVsSAnZWagAAcFwP/jldQWKLTdjvzbXvg49u\nAGkdumCDVgtBjMPPFwGFYZvu57ZHupp8kOG6cX3YTdk1xYB1xadph44/62Ib\n58pE4C38dlBD2LNsTbC8bNV4dzmWHuZNlKN0k/mWjdwLSZxn1lf9Nq8ET3S7\nXEjzLPzuUkKAggkMzuTynt2wT8pm/mXZaknQ9XjOuFpuVTFxazy8h5bKSdgo\nVFe4k6tPF93FmAl9ZSVod/z58IbIzaf1ErkxnLih1ScWrWLE9LQhDoNnzlt2\nMvsFf1WvFBoOYZnza85AVi1KuQoDeOcPK/4Efy2lyHdGDhCnKqZWyLCY5s4B\nm30y+nQfhFWxsm//rcy7UrMs4Tx+C43PGaND/M2RmqOIaEEzo/8rFEcdHBFC\nboyP3KBQ7O4xDy9gBLYgf0ZBDTXk/SeEFaIFk7AnCSIsIP7nQZ8uuPBtfsbk\nZ06ZLLCtq+QMjWY/ysFwt5j2ovihEA1WLV4cNaZTymTAr8EGfVBf0dqeDuDS\nTsZIpjrJZdOEtnoUfa2ex0CuEnllsxvO1oLmiOLHsiDNjaJg17vuacmfaazu\n79ld+z3NdkvhC8AEF4XRJVZx/m1WmONfx1cIBeaVzCHlfUno2/vozONo1Lca\nukA6fAZX9gHBnWlJ/oo76lEYE8/xk7RI56BtwOlS8I4W2mfsEE8Ld7w1eXhD\n3aIV\r\n=TZOU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwlFDULtgCKPccGwi6Ww9xhIaI1wpPWZpoAFF3phms6QIhAIrDSmzW4TySqD4etcuBLDWi++qHkL+Pd62oOqK0bRw+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.12574572.0_1614716978230_0.3781068440625128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.1109a3d3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-ripple":"0.21.0-canary.1109a3d3.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Qi+WIPfcazzu3bNFDsDnZ7chASp1XBtlVxMnS7tMOCzbmLpq2YzX6l0uP7GVo1q2pFjNLC84jkOgsLU4irjgmg==","shasum":"ef7fb31113bc2e4d16e967cc93bb23e74f17591b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.1109a3d3.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFxCRA9TVsSAnZWagAATfQP/0Hp8Rz4d1NRt+BFIIcN\nvskSLTnCe2KIvMdNf9Y++9bDZCHC08VYcNrrD0hfe5vtg5AAtPMXK9VUU0Mh\neysz+D9oWy8ydUBdtU+7DePZ1AVmU5vn3u23xxfVSpn+d2QUxUcpzq5TlI4R\nEMMNhufKjmAkWzsjGBFKfMuUNP2+8a2arWlIo7i36MJIMziGBdJcvSSzn/pL\nDCciCpwvhrJ8FfQbO0idj7FDm0OR0e5q8RBgSuK5Hm7IUrYuE+XOXkPVJE8t\nct8+Vb4ApaxW92PFvq1fQfoV6ffJR29pvw6sJi5xdCCLjumwpH5o7zRbB06Z\nONSzE0R63l9TmLJZXI6DOcbp6VjYZcxmFrO7qLtFe7/bFqIlmaIf3NtFNo5P\nK5Z53zw187lVZRABQ47Oe54APS4ta6+4+a9xhxo1nflke466Z0UMgySb8S+9\nUGwe5VRBnApvnb9Mlghq9GP8GCkx00VpJgKDAM2JaZBEwQ+ZMXQcwDi7T4L+\nJ1xNGd2axDYbHqZctOrTCoI6iCi3AMNoM8kgLZNUcR4IK+/TnqDntGS6zsH/\no/v5UxjlpjXA0WO7VgKMaP9ckpm2kDgtUIKhX+ssZVtIhI10f+X2B74NFncG\n4FBlSKDOnWEZK1hnRU6POF1ZIP+ssFLHetXdGWaMbHGqb4T6E315IuElvZeB\nfdsh\r\n=Bq/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyYdD4WipedFdtOlxpTRiA+1IC7Mt08d2c+f6eqaESwAiBysYgS61nKzMr8t6Qp6wk9h568QtzGCYmnHMXLSWAkiQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.1109a3d3.0_1614717296748_0.43961906388774774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b9cd8739.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-ripple":"0.21.0-canary.b9cd8739.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-4c/LGtYJs1lWxmoI6XmT0XbrqlDTY8ElBibK59Bm6euu1eaeW5g/4WEqi3ttw0yPL9xbQ+OKUHOqGEqbpn3YTg==","shasum":"c006eb18767d9bc6b9bdc417c0f749219460c3f4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b9cd8739.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8vUCRA9TVsSAnZWagAAX/UP/0GG6e2hQIjzg6emc2HS\nej/Lyxk8SmgcL+81JkdUY3k9ehfKpDdpOEyjZVOmJrOgBzIPxfvwVs0gmoeB\nCT/IZlgHKXaJTlmPG2ZYz8wVKN6PI3FmXIu+jIsNr8Nkt8MOL18OLGYDRNWU\nxdnAHYK43fMYYVCMRlajfgHZr3tZXBgyYueSnpuBh7MvVJxZ76Kol+MEhOhY\np1a0sSM5oN6H/H5qOQrn8JFm/S2u6SWRFXrIOlrfu76V6DwqyqKh/ShH+QIm\nmns21JY6bxcs6WSZcl2PP99FmQ0N9dZ8KNAplsMvHMEQnDBZmfTjWnzPUQxa\n0RryQHGUfv/LwOc9XFkkHPF8n+7YY9KaB/0B1pQcBy074HZpbGrNwoZRDvJM\nk9kiks2MKaJyoxmHnrSaiLk866XsbtNQvGpHGZIgPkHiW699OK1SzpeSap8d\n6bFkQOHGxqgTShHtk7HeOLr9m7r6Mccz2Pr3rYIWnxbQge99BtSHIQM7S5l5\njA0TJY6vLCZfOIcjXQFkfIxaSJKPgAIbfM/uYvD7alpySv2x1YG63go+8a5o\ncaEZ2y8pdPCkIU4MkJ68qSaV581K9v0enWdKLPJl23yb4RgRBFTDM+A7FTHV\n7vp3nrlbgxYmmRyk0Pmp5Lebsti+Qih8KRn2w0FICjZ2tMTSPVDAIoE/eVSI\nJiL8\r\n=3UTK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH43DI9MgEmIzpOn4DNQp3k+3PG8soCz7exPbCIngT0jAiAQrGplBBqtY1MEGrUFpbhmSMsAmNNYreM/iLunxGVTng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b9cd8739.0_1614793684359_0.04299415531059991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.71ee796a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-ripple":"0.21.0-canary.71ee796a.0","@material/radio":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Cd6CXi3Ph3zOEtlKURUVB6LDGBo7zhSdwwGRPFiEV41y19NMcGlkuiILVLgBIPRhOzWKRdZgjso7kqHpL3Q/Ow==","shasum":"7fb4086a438752902ab780103d30216feafe232a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.71ee796a.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1oCRA9TVsSAnZWagAADzIP/0vAirzrO2auIIUGprkL\n+o6AnekN8Egxf18oj510W/2Uj38TPA+seV8Mnk6krRkYDVMg+hhI4GoToUX7\nLIqRdDnDJBfbatlRyxSDXIps5J27IHyJEZiRK7KO1/0sXgd4Ykn4uX75fdHA\n6AoTw9fS66hhx/MtdJxJndr+rvW6Wrb26sRpTU4Jz/RtSlBPeGrmDMqbGeM7\n6E0A7g93a71is114DCKEwELB++hvIhJczWGXqr5/xEOrtKhOxn7ASkMKWvLG\nH4p8sHIoc1C8fncAx/RPSxLsqXoQEhfhlvFg42VugqEcgxsICx0ikiRwdE+3\nRMzIAyAUgd4BvUMcTXPxpkL80WioIiZ20WF9xp98kHFzBMPpjsdikprZTmKG\nCaz+Oo/8J9xXJmGGfN1jRgkbdTPCmEKjqBHXaY55xER2yEhb+avgAcGYofuY\neu5W75ZYTJnO3KPrLJaG7D8ckGmixGfmHc1bMpUUUwJ+c+j0AMRJCYWJ2/7H\ndhIy75QPbG7TNHduV+9EKZnTJdkJ9T7aSX1LdAC2W6OHXb52M8ckmI0FckQd\nA7Ruofmo7y8hEAqNzIJcWJLDjIqQQDPFiCIYE3XvjN3rhgI5TDRK+XXt9NzT\nvKyN5R/RsLGlaND9M7pCyFIVSBUJuw+y/WkoL02Ox6bfeDGWtUV5MqnOcOrN\nsWy6\r\n=ir7E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnxS7vfIoFF2O+iHMGNeE5WMW+ZWARsFs4OW9NDKHTxgIhALzQlfW9g0GAb7v8HVoBnI/jipRLm0NkY5m2eSGikS+l"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.71ee796a.0_1614802280470_0.9393844637470543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.2be191ed.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-ripple":"0.21.0-canary.2be191ed.0","@material/radio":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-fj7zSsVvjitPidAW75M+cI0Op4+tVK9XDV/Pw/V7ceHmRUJyyty5cP44p1YSZj0P+RU/m33hyA7BQrTofC9pnw==","shasum":"048a54104cf8e9e82bba33b6af7aa23f333138da","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.2be191ed.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAT4CRA9TVsSAnZWagAAzPwP+wZ7uyBQmXTenfO/1D+o\nlCxOeEZfn268Rvp5RyGOG8rigxfz8GlJUMQ3Fp6X4P8RNwYZpcYU8JhtJxqe\nVlqkIL2Q5Q62ctj8tIe1zZLlUQ1yMjrR9X0mcJjA4NjHUFhe+o25ZZSJbbxl\nDhIqQU8UXVZv7Jedel1Y5dTcXs0uqtCzbsrM6ANJPu30j4ZTdVdHlzXnCnFW\nOS/3yxiaFTjyJalzBX1kV7M/9WaaRh03zXHoBbDbHc/upfwBTK2Euj/PTdGF\n7N2kosDL1xE2IQlWxNZZdLBBTT3z3WqGMBGjg7QBQ/BxiNakTib4WdEsnK/I\npEvujAMeEenx+SSZISqKA+DKFqgUrb4xZUOWJ4OcPx0LGXZIiPi8RovYOiNQ\nlN+jopdkJnF4k7ijSIjjhNr4FjAS/noeqWe/0X6G1LL8TJyr3GBi12LZJy04\nKJnJ+BTLJi8h+c32oHeJlXJqtuyVrV8X6xVjFvxCnPn4jmegd022WCgeDZJm\njp4bdWLZzVKxmsnURmTt56ZGTxmkiubU+UzHIN+Lpp9TAyQayfZV8aZau//o\nrTwi7qJ3Ib6r6pUWrgUpcsHKbiKDOUHZmkQPjKh77vgvCXi1b+LxKzEOFItv\nyXSpzDt4/pUce9k5dY4R3Bh7pjyw+k7WgdkqjKHU32CAVdL6HPGyv0+NJdeC\n2wDE\r\n=GlpI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADAq5D9ITZtUxK/OmSJn+zoeBFH1CrE/oY+WrDfVp0YAiEAk+54HRWVK0B/YX3cFvyYpWxAwUOcjTd+L6gCO4grmv4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.2be191ed.0_1614808312150_0.7552244043428138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-ripple":"0.21.0-canary.6dc7b06f.0","@material/radio":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0CdhsG4QBRKO9wqkwRYva6lxCKUIgjUNln+eI9epthTg4Tzvg+jJmxVRtDp6CjqiG5gpYKefmjhs7W9hC1KJ6w==","shasum":"970e31d640db733d9d99249e793cb25367cb49e6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.6dc7b06f.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnLCRA9TVsSAnZWagAAWnIP/00tvosuXqQM8rWl2K0h\nqBFBbMOiKRioWW7/2plQSjgO6PCQxedhXBbTzQyR99fw/fcjKHqiaKAcfn82\nQnv0MMfydDP1aQw5OPfVFgHQCQa8AZPSdg6US+x7tUeMy7Z24GV2la38jWOZ\nxEgWA9WPSCDDd9EN3WSrC2QLTkvTjY6jvQwhTUi30RjjyQdVnK9BXFCyyI5o\nWkohPXWc8GvFcQNYmzkastgEiXYi9NcOM4yQLB5uTSzuHXi3weg1a1TLOv6H\nMrvnKY8A6XfvMkVilPa7xUoPlvbSeKSaqtHvK5zt3eMLvKi5knILxjDiW3V0\nkgwyGbZ9H0WlQGO9D7qam9AycAkTpPzgg0Mdy4f0Lj5yPstnHi31IDAtnWuk\ndy3jODuDxdTrLT4z8grotXVz0yCqvFPSO8G9vUmJ+tyQGpIW3zvIkjmVeUrf\nHIB78HS63e9P91JEMlUPrHfT7G3Unj/wxXvohO/3kNFJ+RepkT2Qs5do4RDg\nXtztUSdVflRLJFhYb3wYaMvAvG5KThjZfuSROg3a+GzYh5oSu7agPjo0A06F\niDyQ5VJeXdAhozP2HQ8FTAmvnKvbDG2cAeJafKib8M2aqFkpaELacyyCbesD\n4xEhUr8KOdzdf8J7XvXFiGWye+dQPMHrpsWkPkWujEjb+zaBDhjhsGb3IVK3\nTib/\r\n=ss3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/Db3AbTofERt3beAt+rfcoj4TKB2/sHvEt06xj+wyTQIhAIsWnpQsj3VLE03Ms65JzjwktlIq9hV0rreSrYlq64xB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.6dc7b06f.0_1614903754799_0.26289731318208953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-ripple":"0.21.0-canary.24fe7ba6.0","@material/radio":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UINIs/k5wB3LTnQrFBeQLgoKdp8vhkI/TCbEdPCO9NZzm0gurXnXKkcNZde+SbMWcyQmKn8gvAwgiz+DlzoQ5w==","shasum":"18426bfc48fca398fb9f5b606d05f8298703220f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.24fe7ba6.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmn4CRA9TVsSAnZWagAAg40P+wSA+x4sya7w6nb111Z/\ns/gRWaMxvnkMQ/9US6OtIste6m74apallVoAiCU8RGrLNicjzInpYpSfZoD5\nUdpsy9q7gT/84mdrbdf6gbXYBARPtCKQSzxX0AjJ3FLcFG01tAsX1ruHr3KR\nUkDtQebKNgDGQ+8eL5mJnitHELWOqV4QVdDbTiwga3whoFe20dnPRy6qGjXg\nRyBouGrTsihkvyITQ3/6s1jlZyGNYebKrYNQnYX2jkSbfOL4yXtDxBqmuC86\nMKHD5o0PqfdwxLqM5PtTBa/7BJ9eml60Lk//wnMJDdhkB2UAg34OW1PFwQp7\nmnXWEvSp3ntQJl2bmhdOzqnjF5wz8G0mL6s2eFB3E76pemKpxbYo5a+hbGn4\nIoo3CYDjckwUnfjqIYqyJu2e5Oi0ieitanawhSYsgBGjzG69m2Y0tMFLLXHN\nqvvyNRYPITqBtzmRmvXyPTE9PUSQUi0JCYFx/ZlZ+TqLOO3iWtFMemCiP9m0\n6DCdO/H9WATE0EVz91JZEQeffk9KcnWDNcHZ6BGD70ptvGUWW45kGipT/Gaa\nQuU/usQMhM7swYezbF98kTN3XO9wieVORrFX59jxw1W4+PL6XGXYfChPZPJt\nOald3HGu3t8uehHFIVd7mLXI7zdgtMZc8aTzmAtjfKdeV0YLHCvsMyPmP//Q\newY3\r\n=Wm2o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbYgLCosE2kFWmNzWcYeNOPZnv2zCLI3Ih8WrE2L5hmwIhAKHt9ZmvN5md6bQ0z8vZ/v6286W0bLHvGHIoOvLUw2Xt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.24fe7ba6.0_1614965239901_0.5443653834339244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.12c477d1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-ripple":"0.21.0-canary.12c477d1.0","@material/radio":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wVEWoOBp1ZdDCh0QK74of5IetNkrZfBHEn1g5FULYbFnQPRYbELTHRJoUAnQK6xaKZmpoeqNxVCvYoJIGbffrg==","shasum":"2ef086dfdae94f0a7f0092b2b2d4cc9926503e88","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.12c477d1.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPwCRA9TVsSAnZWagAAxPsP/Ahe7AGenrN9BYYHn6QK\ngDD04X/ASQX9OFcsKPK4Z25/brvu2+D9ClqmURUVPTKMZ76o57H+M97b5JDT\nAxmUTht+0oeTEw9Y4N7u0ToVJOZ536KAXj46Q/dgV2sUh/UD9VfJwNHb2r1A\nMFxAu0WHaqHu4srj1JKDiLjhWaA0EOl5C+2C2JFny13ZqFf5zjCZOkmGsW8+\ntUAnHgNEuZcPM+V3NP9dpTlhWUSg1A1to/stDc8Dz6zMgGeGzga1f8Pn4Nyw\n3ucqf7zfF29QJfoXjHJEhIPSCZRp4Q03WfTyTs0OPeWU0CidTEWj5stvoyAc\n+nf/8K9aRQ4U4D4wfy2LkzwybvXY3sd5TnF5aDOEAtwvcyy6s1mkpBDapmyJ\nExtORv73DiHsPHxQR0mup5vVp1aJATRgNh8vo+q90Ke0xQR1rk4DAd7VsVYh\nfLkAYXNYXmjhnziM1QplwCAKA3fRdUUn0Ui1FI5Rv6pZ6H3Y1ff+Oi6kDrM1\nGIHcpvHGktcHEKbWXGp29OBG0fUjOPLd08q/CfK0aFZT/Al3MkqaFmLapkIu\naybBHQuT+6OKg6nbl9hrJXUIt9IMf+4+ALuWlf+PnEi6jGXQ8kUBQlXhicOQ\npsO7wX47hJcSvCrAofiXWtUi5LS7waIIzqZGYQBz+JYBU8aoueS6Sj7bSngQ\nPlWf\r\n=meUp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWWKWezRk791WkoAJCbCBtRzwss412hn/RTDI5rv/FAAiEA0PJC3aHCx/1lfdyBI/fo+0KCXtDFSX/aHeO82gzx9Kc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.12c477d1.0_1615242224508_0.39676980591286903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.4c38f801.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-ripple":"0.21.0-canary.4c38f801.0","@material/radio":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ROMSAd5sSYKVu0osw7/WEwV8KsUtYr1h1VZwbGhvujR84mEUnXTEsYBGt/LNL3IBySZT2PR9t0A+7qRyLvqtIw==","shasum":"6d9c5b4c1dc5704d55a9b5853c29a684c37b8213","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.4c38f801.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJDCRA9TVsSAnZWagAAmGAP/R3umTWXZUhNqXC4Uuyh\nI+3e8z4RyGU40QG7I4NKwoXck3hKRX7n5Ivad+6j7FJu6xnHNfUnCOQsjG/I\n9lq4b9qvUsTxYDcH/+zIUNQcFgOXfBIGBglOnhMrU6X/JWbn8fL5hiBrIg0/\nXwzbL9aoKixCuJCfggA01OgALBn9nog0IKodoJF5wElDtcdpntxiMOF+0VQn\n/lLagX7wh33yGQf+Xpes9+U7KEWgk/zsxF59rTdjAgSaWsMjmRv4YH5H3Eo7\nME/QAz9AD0klB/FQoJkwsLi11FomFtwN76F0eIu0x06aPYbYNKUrvJ1/WjFm\n2gc1bwrcbFe032vpH+bpJAK5bCdCL++zp7l8QTAs5sP5BU6c4sfc1H28C1+v\niGwHpE4d+fVDwnJ8UBQjW1hbAIhp8ksroe7kdXOXSrOqaHadZEIOJb1yoZ+X\nWUht5VZMKCEdMFaN9mmAtAXDhmzr4KEEB912npkq5cCST5rWmwJXQCTjEX7g\ndzTefqlFK9SrXZ0h61wRjR/pH4rbt09ZUt4dmuyAo0SfOy3nyovWd8KJYOcj\nZxJ5EINSbhfjHBikzgIa2RcB8cZ89g8r9Vr6aJaJzWbBcoEZZf9Ogq7uAoXw\nOGZU7TPalOgfX5T19jVm4nbXKZKtIGJ5M+uGKSKXox6jQBKNMULEAgc+9BXz\nrq4i\r\n=+1DQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVqKH0hwI7wKsH3zQI1CTGZTIIBMFkun5UXUDSxPlg7gIhAKSwZxgn2fhebwV7IrPUhuumvTpGURdUck1MWOqb9/4T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.4c38f801.0_1615245891176_0.1899729571048001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.8795b83f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-ripple":"0.21.0-canary.8795b83f.0","@material/radio":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c7d98fcde.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ar3XNFEKoJl92/MGVVI0vld5D4QNCw53AL8dJnpF5Obgdsyhyu95i0oQceo8XxzzX+rDUoqKn6OGzyenWmo6mA==","shasum":"aaf5db1e9818ef83f48a2962d932d7f0590229ce","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.8795b83f.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74gCRA9TVsSAnZWagAAPRoP/0XjKQdHN6OCaB+OJTfs\nrwgwXYKr/cAYlPlUHfYBHZwvCfXl7cvCeFA24E5lbD/15CpyeDuJc3Ps+Wvz\nGuDrG2V2Lopq1VDOz9YL3SSG3BVm7hs5qdZtBDewruD/XwV3irt3fENF4Zks\nbcgup79LDM547EFeufQFuldDBJw7s0DFwqWFybKaYIrM00rXfaTuJ2n6ex3t\nB52Vz1PCJE2qDXVPQ1c3uN3+xKS6w4pBAQ8R6u/zFyLZO+DYqhLz2vueT5IA\n2LSizORm0FuSSKkUBPv+V/u5/zGmwkTdG7CHV3jaxSNzJZlS/wlGHgkBsPzt\nMFGg7/gXPXVwb5Zn1SlGi6/K2Qpfr7wOZZ01ERRH+anCkkqm1oBQDIiMha2b\ndGNMj13MaG3FVubWWU4Gwwr8JpSb0JdPfDIoCFo89hczkdGeZnMChKyCU50u\n+CrslncnaMIF24llve4UCVGNgyfvcAHl46dj5F0ZAeBeX5x42Tjr5w7DTp9V\naWPmuhCdB0UOkEPEBaYWN4zP75bJ1DA/2eMweTFYUZUB+4DpRGS9QFcwlVkH\na3U8Wa76Y8ihnnUwa9+0KOriQ7iaTkjvyQUWj2gEMawOvduQwDGpLIkDLgLG\nbqkq6/Mij/533rNdn9bzcxrbrq66joHCEv4cwmezQl82v1jo0GGIiQetBjCC\nK+mM\r\n=ZhVB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVl1X98LDhZqWNbTsAiIKbQhi36canHd4PKOwwW5IqqwIgJWu0a+T2nMOmGIxURLeRzOq95BATehbAvsFOO34phXg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.8795b83f.0_1615314463720_0.4110953683719625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.12b84cb7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-ripple":"0.21.0-canary.12b84cb7.0","@material/radio":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.7522dcaca.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zr1L0o1bDJMkkS3gWzO6LDHT5BmeJfddZXlKP2V4bhPBnAC0mC3r7ho+0zUTH1y8yv1Pw4+bP2CX82EwaVvRkg==","shasum":"8610d1feb6d6fd5e8919c2b2d06a690cfd20da39","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.12b84cb7.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBW1CRA9TVsSAnZWagAAQn0P/0pEKSUHQSLPU5z6NOx1\n51FCZv931utut/XYDlfB85f0Sitx3BLO72ftKxZYmsFgYqI4iC2rauQixAQf\nW6vWQ3DtG49jRfquIM/RUQpIu1BmSMAZ7i/yBKWzrJmU0KtnOxDM4St/c8Ci\n9Ug4lau39b3Q41WHMYpQv9GS3JGV6LE2+8YhvfhbefALbRHk3sZVAxjyNDEW\nf2yuamsyefpcjmUHLfl/2nWhC6stlVs9RVcLthXPoFVu0Rh/zx6NppFUhJZV\nUILfAlBbqV9dAwHySVupFNrlQMG/F3djsUF1rCKwNqkjDqkkymGLvANibhJJ\nTeoG9hD6O6+tTdfd8quNlp4slA6fWgBs1v9tXmMX9+qOluiIlLDnR06xrpEz\nVjGxiRteYYQgiO0nG0EbGpLNG63CDVamXo8qs5zVnc1L2akFIUPb6Bgcf/pM\n6pymwEag/zo4g+MRMb/UDnexteixbfcA8rFSaAnkKqvLQroCyhnjV6MC9mTP\nJUKFCnrbpvr00UV+SpoVnKgWoEYwCNADxQAg2KUshm54/vcwqFoEhfpqJj7S\n/q9xF/nwbYd4YtbR2gACFICK7FbplOsoI74cJdIWq+N07Ssj91glKF6x57I3\nVfnWEvtTR2ru0lq+6nyOB+0WlWgYVqTDaVR/e2mEfvxuEFS029GXTIAeTwrL\nRSlJ\r\n=KC6/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHugedi5yPcHnOFjASXQ3ESfEMY0cPD+RnWgMjQe9YuvAiEApucKzu6UFSfK58jpBC4A7Kwl44sS1kt3s/XBPFOp00g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.12b84cb7.0_1615336885322_0.9679512951509424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.6ac6784b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-ripple":"0.21.0-canary.6ac6784b.0","@material/radio":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.7522dcaca.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FoeG0d7xgPv40gI4w3dQoBNRMnt3Y2mGaceY9+lvzDJjXUuZwg9+aqVgMLEAQAnGMBzDBqrqgo52b8ErW/r5xg==","shasum":"e44dcfe84b7c1ca641a6ce89426efe240d15803e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.6ac6784b.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgaCRA9TVsSAnZWagAAZSgP/0lzb2yNtkI13ofionVO\nrZ4aJHNPAeOoVlx5g+a6Yafz0rUkRifpsC1U8+VVWDSiezlz7cq0NZXtMbf2\n8Loc8pfBl4xtvuLEJBGKHMN8y++8uopSmBI++945XJMQc2TwCgggodDtKbk7\noZFb24SyymXt4h6AnNmV50iSHVef5jxzZbHDaqaGlH3HlugaiBfZ8tMOL+ya\nTBcGnfXfJkS4HOGXalcxJtJbSwB/FmaHGhUZn2onBW0Of/WCLU7rGivSQUOO\nYGjHYvLtS7cvXYra8RLYr/fqXFDaGsrNG9eP1AusqD3SSAhd3BNifsqMuSyV\nlU5TuuwbeyiDt3WwtPgh8INzpOGhCS+jxcVLSKXFB8vrja0B29DOTo2OgIFD\nFgk/MPX1c0VGopU7N0ZyQk1zDciIMnW2LJvrTTBDW8LKLExhTzuxNlb9x5zr\nqvUMejU9B1Gflp/17UW18KEQVY3EfQqpzxe137/S8j99bnKpbDSEi5/mvMnS\nnhZT6DrJgIHAt4iwYZYKxSy0xvY7RFLycKYd0emUzW5HxwYI44/hmgwjTk+A\nuga3ktl3bQSDh9AUWVFXlsBYWx8cIpoBM2NPwYtRN3Q05Kvijr7puvnQofcU\nKlLt0TCHrUeQCGwefdkLDQzP1nyLoimaUcpSBGW3DMFiTf/9vwqSJvgxRVEc\njnXF\r\n=xh54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMsQmGJo4N9vAePZKG8jOnWmUnjiFBFr+YL6+x0S+c8AiEA2v15Au944wWRrJT57TA0ZQNhShj99e9iv7StqC0felw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.6ac6784b.0_1615337498561_0.4947870336400093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b6d92934.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-ripple":"0.21.0-canary.b6d92934.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/12wAhKCrg2eiNShkgvs1Z/OjctZ8ayKE0+SHBnlAh1u7W2/6PzJc13kO1uWFyQxqKsJ/x29+TjMl9B6MO5Vng==","shasum":"6804c817761fa777a5f4f2b563beff9524c7131a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b6d92934.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGoCRA9TVsSAnZWagAACEYP/j4fAa8RkgiC7/wPH3A7\nCouQSHud9Sw8l41OyJks7bTIzjlNjPZ6xNFJehRH8mBEG5qhxq6NKjOdlsY0\na8/0B6ryHhz7E4kR38LCDTILnj0UeIg/j8I/49hFmSRPxYyxIL0HW/8FXs3S\ntkhvPJ4Mkw+jwTMiFfITPNMGNxMKFuVQe+ZY2lH7rkMhh3IpLgAytIc6n7Ky\n+SG+1qYYfI+T/ibEw5q9IiDsn58hxmC+w63XvNnZeVeFgAP4J9GeSoR3UEgj\npjDk5ixsTLKOMAZcPicQkYDhRNTqqfxTUj58hB+BG41Xhy7q7lbUkA8TFcy1\nZUcYgglr7hI2f/Rwe51NnQRAUuLxCHQI0MkS7TktC6DXt4OavmV+osqRfCwj\nncyN8AKsQglmm7k7B1kdJfli5uxdK4GpQpEGiPjCa+E4ebFxYG2+wicMSASE\nT3eyuVyNsZzrcUOLYUUjK0pwrVQJ/VC4RWBVO/vUAyoByW3Xlm2BQ96ggyda\nTI6J+vJaoAsmAKcj3hVi38rmabREjdPdPl+4tJei2KzkHgoLwlKmCo/t2H76\nqH9ilZyfHfSUXl9tiHSWt26JGE6FSeqDkouvYftzIh9VfsanjJqAnboZquO1\n1xSQ52TmJyf5Q8sWfsaWtDU+KSizG8t7Ay7lno3otYeCNU7TUijnbKI9wER7\nsxUe\r\n=FwAh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrIJ1p/K+v0qgZQAlj/EvHkbhjSM94VOTEvP7BXO0t1QIhAM01zenRCKiGIpup0doJjBpRpWMpZ+vpKCqaGLokFylu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b6d92934.0_1615413671678_0.8303317859229575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.99a55b9e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-ripple":"0.21.0-canary.99a55b9e.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-3tYkQK51ktrGAaUWNAFnVxWamXhm0BLVJoI95qddBIlkh+0k8/YgrC/2Vsp+VSnCTIp5LOU52/hNG+fPAYFUeQ==","shasum":"04b16dd345157a736b89dfaac4601120564301b0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.99a55b9e.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2PCRA9TVsSAnZWagAAkzMP/1SPDBn7jZBj/TdonW3u\nudHCgGZdBbmyf0KWyEFbAU4dtL0sJ1W+BS9llj926zX/xU7zWsfdttDl/05S\nXpiDQb70TA9BQQ0gCgSmoiqcmHH0a7OA0ge+uj+zz5BnoFmwYRQZpTWpWMU6\nYb2xdew3DASTCXkp54ixONOz0cs2J3Ss+t4HSvqKCRw9MhsiI5IF/dFsEB92\nLEsCyTLKe4bGYXq+U/l8DDLjm5mCoWInueCrdF7FOpBlBfoB7Mq3oUgtFVVG\ni/HnfXOQzy/nokzqKJCHSyaEK+B2ph7/AE/1aChMYh1wlG4A43PRAdfUtjih\nLyOPR79EC139JbbFsapzLuW2jlTSVSW7TBvb4YhUgeADmnNow+PiAD0/R/vz\neQBvxfv2QVjRa2u6Ht8wR7okhAp7S00edqtPF9O9BYHxD1dq17UDYZA7y0BJ\nnf/PKjBNEeKzeBf5kp8X/ViX6h4xKM+MiBnZw+9fk0w9q8pg2QvWPx3QppbZ\nIANNFhDVQDgnQvuDpECvjp7dG911xYPhjrhG817EX002bOs/NZ/iyysSd+z7\nc/a2RV0m4w99NR+0iBC6Aa33FFPQV8kAyQJblgulqN/ltVW0oG4XmO8a9FoM\nzvXikFbWbyg2BL79h38WBeHvnfRXg9dCKbMPMea4x9yrcWd0pIN2rgsTKnaB\nLS29\r\n=AJf1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLjVe/dfodxsxZ78YyPLumDJdMmHw1WhWchmQoxbzrKAIhAKLOVmGOnL50+1Yry3tMY6gkDGz7dxLjPN7xK17JRmh4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.99a55b9e.0_1615416719187_0.8334513471813132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.bb14efb7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-ripple":"0.21.0-canary.bb14efb7.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-a6tHv8HhwzSle2uA4Rg7h6qxGdgYHgQGXfMZLkleNClTzD3pgs0GDyUQc6WGuNHf06j0KpIbjf1U1mVfd6HFQw==","shasum":"dae269b24bf8b8cc16cebe7d293fbd1218d39eff","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.bb14efb7.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVg3CRA9TVsSAnZWagAAfKMP/iWVyDTOWirz4m6KGM8c\n9kRZFiQUSXr+/0SL/dnUj85BRIueD6WHAX+GuaqREu9nbbJ3tpr5kstsIbnJ\nOnTyYmbPg3j08a4lY7G+0/PQrg88OSCatgaXroe1myjh0pQA/sjVcjpnfni9\nwZ+dAbZT4NmpOzofbI5yiZYfNaPoG4bsAA6UA7EFdu5BCg7TUSWjyRvVXXb9\nYu+2ao7nZgZid1Xy5CQOqZ6dC6d8THJ3L/Ex7cX4N1BdG8pcUMTTVU52PWhP\nhx2UVmwJLlnd1Vwnq0GoL35yYHdGNsmw0jY9p+AR4/aTFKdDiHGyrjZax0Ae\nPc723aPxTu218XqbxTW6il45QdZOzplbmuMA4OIDE+W+F4texvcDdDwqfLwO\njHaW3HKk6LParaMHAT34pGjRt89RnTx3kaFEwtyv0mvlcKY3nbC/GC6loWrN\nXwmC8O1AUlcV3tQ/tOWAr0Na9NnzoHdQ9rpzi+ESk3xJDgOeocJxp53EC5Er\nKOSue5aD+ZJ7JhZMkfmWQG9cEUsONMDMQ4XCs3nA9MmQ8wvFko+BuX/S85FC\nKf7r3EoKP4i6jtYFlwVUQIvIItFc3oA9MTI766RmKVnrpt56cZUkB41sX9yg\nxcw2fC4sB+aEc0Nf3wU1K7F2gNYauBW5Y8W3z5AR+NO+4XoZBb7xgbvxehyw\n62Jw\r\n=eXVx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg93QjhQuabORvT1yFp64T51mMYs9p1n4llSeP7ClcywIhAN66YlDoLfS1x2CEkXtZHmnu+7zVkEXfYKVFIhsQaDYJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.bb14efb7.0_1615419447260_0.3450518916970413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-ripple":"0.21.0-canary.9ecf3bdd.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-w64KIzDkwfhOyEuR9tju5lKiFpTG6fgTBJiC2Pj/RhZswhzioDoztbBmIH4C7lXlrcgOkAOB+NCadV9qS67Dhg==","shasum":"723cae5988a1158278b84cd75cbf7269a29d7697","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWMVCRA9TVsSAnZWagAAbx8P+gKpSRD+H0MAFOxo8Bw/\n7JgZNdWIa0AG/+xVckgJGr7rO4uWwtsqBPEdGdXOsUM4Ycvk1BuBa3jtIPCL\nTfmDkEcCVILc1QZJ9secx6Oe1L5QeMY73vZjCOZXB0p3Aj4zxvkUKuwSeq/T\nCYwkUV70yjoZCgrCBGEloyqZ1A9N9gl7RUxJEA0XTrnOQhbPiHKeemOdCrXW\nSv0LSIpDWV2xLfUZIXEK0m6WfJmSGvAD/sbfPu0/tfTYhfttbdb9df2yFRw1\nzh3pi7KpF96jMu7nXw6g2SIj8rg951RW4KbZ8FKCJDBeK9EzRf6EkdXPGl2n\nqsWBAfu6Noj/NF5DpukBpF+uXpzOFWsSfwj1ngoGTZTlDxqtXIZYfYiDs0fm\nlTzYTWLPqxrV9veMppsIN8GOyU05YVvfg4quBvokhS07+TYOFa7Xm+Bdfqjp\ndmZ48/+M7oh9FfKg+AIbHk9C7yGdWxsuauA/2Uz6fGSsanhQUh9vyi2EsDOy\nmiZH4mFMTDfrIISSQNrryx6oDk04PHk0ot9LyQ2rWaZI/9HGeVspjoaDkCNZ\nrVhbsD3OjLaMjBe4GIjyM5uxIhx6MnmQqcgciCGoCwoihFLvGy7q1oZrHx6a\n0mf8kuqknjD2GbnKWPSUu5G2gCvZxynwF2iqFr9YiKYgVNXSwCweHKDjvZ/L\nCXAQ\r\n=ZAI1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwEH2X8RnVKnr/0i4ubEU1gRhE37+1uJIEyouQoaO9AAiEAvfvCBZjfQz18M+jsjV5aUZlB6kutGsS79cnkgxvFQm8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.9ecf3bdd.0_1615422229078_0.4480246477173313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-ripple":"0.21.0-canary.7c0e02fd.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zLYMAxupVFTVnMMIUKcsYCQtq9njENFfQeE3+3nSd/M3WfWkCOekIIM1U6gS2Wcm0A0MijBX9yQPEnNoXCXRFQ==","shasum":"7a4d5c1493b5ce722c4d11a8fc44a3532b9d65e7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.7c0e02fd.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaNCRA9TVsSAnZWagAAw7kP/irw8CSJg62jbidDi8Zo\nO5R+u2yonV+KDFFYWnPcYGTUvs+dXpRDZis6IvLzXMxE5lxYTwfwzS7scECs\na9Pf71BbuO+rbMLE8SvgqtuVCBNHbFpItEIjCz2K7JxdzAIWDUqrNwLM6FUu\nwroFVD76ujkldbLGjuUREIP8VwwZyGHpN5O9/Xrrlq3WiElqd1dngtvdvhz0\na8Dp8C80/D3p1lyrW6IRj1yzZ1CdyYVHs+/V/JazFhuKTvsx3ytT1G6qm4ys\n6EwZaRd3Df0lsV2DFSUlHyGj25vaFktCgFwNJPlbxAIOM6EpisPRY2ilu14J\nM2R3bb8juZhidYoh+zXUaByOqBsG5WxgTYBfOWQxOkRNHofxhX4hevdGBhZl\nyuV3FCfiKyvwqrbWS7MTtul/lQQyUE6XH6a2RX486nleH9APcvmQ+OVXRiJ5\nl7cnPuF1lIFgJUOLoUbQbv0m85LWxTqYChckkxZaqwP9Vk/DtsV/591+LlvV\nid0XRwZq0TuP0HuB89mIyTGJDMzqBt7UQDQC7uA1CxkwuYrTvjI0lX/tIvhm\nHCSj37mC82D1npmHPzil22l4ZFk9I9otpMYeDDUzGx/QkWRgoSe1sfunqBL6\ntDjSpGGaUuccrac6RxFRuMfKVYnftg1ETvrxRfacE8nRwGKNcj89zXh/io2j\ny5U8\r\n=gSwQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFT9jTHvVhYuy7mixq63svbxYpwmaoFn113f5SW5jXmAIhAOISvjhOA/+bLUptuEOL3xvMCrhHDXzY0tHcBsLhLGwT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.7c0e02fd.0_1615427213323_0.7854920455816077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-ripple":"0.21.0-canary.2d6d59cc.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uFqprnHWos/2nncp8W+WLDlA2O0k30JA2hkqhdaTkSLmlKbm+2MRnKDkxDAUQTuVffLHzguuQosReV+rp9FNaA==","shasum":"9097e4b44a0469e49ad5722df1c33d9954e846f5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.2d6d59cc.0.tgz","fileCount":18,"unpackedSize":100043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGRCRA9TVsSAnZWagAA8/cP/2hOaEUNZgYiSoBqzSzW\ntKxE4HU8jwWPiV1Mxh8M4NBzVfqTA9cQW+SoeeSSvmKj6Y5XJPrf86lEyut7\niHHrgTNdTwrpaC/5kERyFRQgZhMjeTfsmituVaVN7I3HhQfU2z9LEbEbuPo6\ndnm7EMN1n6PQruZf5Sxsj4RyXRwZQ0pWMBXdOwpEUBK7WcCMFSa3o7C0S4eJ\nT2ifPl0uhDFdC4Iv86mQmGPMMHvXJBuUnGn4jJsOCdMKF42X4qnDbmXtUEqE\nHw0acVhPvVTlUinGhi50kzc5XymPFsLtC87VjlryPR2mm9qvWyrW9s79PFxP\nJoRd1Ic6CzB2O57fixTyBpteGeOyjtjEOY6n4Yv8Vu7LPhfJ474d31KqGsgs\nZ5ezjfxvc/1P0RPTZeLJIu9eVnCSr9bA90IhBfeG9SSTcYo6ZSdb9t7N23T6\n60SMBJ5n8GPNh0/K2imY4UNxHlTobcFhQxK/tvGGJWpnu6l/NFpUytV/uUbf\n0EOaPIxUcizX08pswtcZ/VLKRNJWJrWnkHBskN4+o3jAc97OR+GaqL+IClnW\nUY3sxvlossU8nuMyWT7Hd+84Korq9SV8NFM6zigalwkD6YlDikcbM9s/JLZd\n1MZTCj6Ao5y50i4kAF1wrlAX/jEvNDrGmlUojr3x5gWtGrT9LuVOiLtl+Vl4\nNVHI\r\n=jn/f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVpRFZHVKQgkuek0ZsZr7xYSpVkWUT6pkQbWf80gbNNAiB9tqy420aeEqDwjZ0cCRbuJJPQH2pRXkV50iYgwGloww=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.2d6d59cc.0_1615487377362_0.4415971140353725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.0138863c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-ripple":"0.21.0-canary.0138863c.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-d2/lzIArWZXQp4AP2MJhfV8VLeRtvpYY7x9+HBp10FiUD36jMrsHGvcfnG+byUzjuFU8QkdMKBOpDnvay7NbUA==","shasum":"09e36afc4f14c9ad7d791558781eadccfcbd76eb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.0138863c.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNSCRA9TVsSAnZWagAAy4MP/iA/LvKakn0mI3WsCF6z\nyBhZ7WX3S7sWNWBc8M7ZvKReCing2q1EGUNIhW2aSFAMPG2uFAlFy1hxPmMk\ns4qtZNAVURlKDRjO9alvrP8FVrDOBD9YtJ4TWm97GuzXu7qAm3cJCd/83Dc+\n4yjHodqkCXVh3tA4qFlBBM/R333UvF+H0fOdDAmdo3gD2s7DHJnmq+xTHXNT\njFyy5Q2Ss5d6zKrw/SjN9BmhNootnUS9YqE+7xslo7HkLApMJOaGlgFAkq8f\n9kW/l3gkE6RPYLiSjEDc+GVRQbHa0rg1mMCIOKgWkWlQ/IzAc6NXIwi4PkO4\nd6i56csb3ZJSyBiXgXciPPAfriiHvetaSP586ikGjzoKLQWvTtuZTB5fTFSd\n6DM5i7S8U92ahHblK8i1hCSz+Ehf1SOlEUljfxFeymeYL/AvfzTVpba+85ky\nnvamXl6Li5UVEtW/akMsU1Q9KPI23clxyfhSci9aXjQQ/mrH61YJBHUebI4V\nSBWvXb/LUMCP/F5pgNYr5suTdiJ2gdyrM/z4m2+JaZGRa3SfsC0mj6bEBpxT\n0oZijyFJZQUMtIMF7+Wt645GcdlXfbq+IjX60AN5yEonamu86Ke0/t9IUNhg\nLtPnk6TcYISDk7E5DBw2142ms3Lc1fdQdsl2HNRyGI8YTh9jQzqZ5zEhLrXn\nDvr2\r\n=SeX5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8yof3/m9DxDCw0GH22d5oWPi+olXjSWTK9NZT4B+TVgIgDiyw32tIJkA3lubZUjKZKIIhk6s3LIntpJ4xW7gDTns="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.0138863c.0_1615487825736_0.11077990755305622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.926f5bad.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-ripple":"0.21.0-canary.926f5bad.0","@material/radio":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.59010b6dc.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-29+op3CvhWEJv8J75mHX4jK2WUVHjbT7jLS3Nhr/5pdmpPzKp748ep3xfWDa18dhP0VWRkLhcCzM0hu5KBwUag==","shasum":"28fc43397edaa2761023b256c6fe9a2aba819186","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.926f5bad.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsyCRA9TVsSAnZWagAAa/oP/REHjoPJZTEg0Lw8zCUG\niqLohnFR4m68JYYwuav45OMk+YVDNarsoCwEyozHHljLBTGxZXxwDiIhWF6e\nxAIa+ounfuwFNCdJ3gB2lkCez5fIoSdPhVdM57JvfuRiNixFWJBG2tj8aglH\nD12m3kHRW8jDLcWc6u5bJTBtX92S5YNmVTrhOCssgUOmL9nUHmRtS4NQBkEi\nwEGl2ShAEKAEpMrEhNzxy4o5Z0iSqVoOruHze6+ddSdrlZUe9XKpP6LVH6so\nQL6E0J6QHFz4Ll7AEHWC92RuBbBnJITW2t2v/NrIRJH+8nNgz2/wl3pCsF2e\nJ5FbiWNbDytNA49bnYKkK3u1ytWZ7QWlxIjUCz7eewdT6IPBi93fbnSlg20u\nlXhEroWLpbOMOn37hLmVvItSvPa/aKHlUOYtYD87xgBP4t8oE8CiyinByXre\nz0PYELvrS876AtZd3N8+ItPdJwn/vW91MjfQlTWXD2UGK0VNoshll7tXKp1+\n89NXBj3Kzl/fk2DqwCF3ltQq1djMoI8rG/vy8sYaYZSlcTPACwdx76OJw7nE\n+DslJWGI9NCdt5jpeLgWoY1eXbPKfkGIHyBzIQgnesrAU+9P/e0VDkPc0X/E\nKEID5czav7DYBnz8sg2RE/reRIu+FWDaGTjR3YkMMz60EHdMoXW2fLkGXLT8\njKdi\r\n=mvsZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDufQvWtzotSfrwuUCUppFmpgcE2+tItDurO15mRwexmAIgEWqLYUYlb+RMcGDim7x/HEHYhHH+LE/LbU3WNuNd1zQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.926f5bad.0_1615493938137_0.6367335814791415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.520290a9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-ripple":"0.21.0-canary.520290a9.0","@material/radio":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OGd7e7fWRqwNOt25xhCo989jeMtxwk9Usof+08FXEPKZmDrp19A6lACUOzOJnOU7g3xRi3c4bpKY8nCWt35szg==","shasum":"1f023a24ac8f47b146bfb19f14e2f2da936b3f9e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.520290a9.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpl6CRA9TVsSAnZWagAAuCEP/2W7+nfCpYefA58DoTn7\ndZ4HO7zdb8DoVuqpHRNHZvbABJVx0dm1OyzypJOKrJ0juBPisZfNV3LwSYi/\nk4YNnSWoQcQX2yFyWiUrxrjdHptL1nYU5LZjqt6iwwfMaIf6hPTQNpzMs6pp\nStfkp/PENnopL1frqsxKnO70EMWeMmAzL3eWajCFtG2nCSnQQsxeg+h5hr/f\nFovUTxBheL/bslFbDxyvcXp2PrezUEmBEdYDYyU2OwoexEiOJxvBKpwVP63Y\nxoXxexrsqfOWKABl+bYOs+DsCu9QXGvJlThHXqls9BfI93RE2f3t7706Q//6\nd3vJzDoP3NKSOdSocUrVeUIGKa+T//2KpSqmnafdvDeeCWmsru9iEqoShz2B\npyNjoWNsqAeBU7OIW6PekQ8xJiYS3jmNIHgjylVyjvfeIRCAxkvSq8KDKdi1\n9UBg2W5n+jsLtJzNGzxFREf2T0NDKTB/AghuZVa2JNB3uEBscWkT1erH/4lM\nVYzyt/BhNUIk+Vn2ifHBQEzasxoJlp5IxCnQ25twbc1SFGzQI/S5mxZM1aQ/\nqTYNVZI1OJ7YaoEV3Z2a9ojv2f6u9+WeVL6T6te7wyoR2hNHW19/5ZDVdkRz\nLmADHxclHbWIh+7a06XXm7u1MU3wpmcueLWfLv3ZswT1tZLBDNNi0v+n+C71\nT7LO\r\n=4f4c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB64dfgx2S/HprMFdWV4vqmoJLxh7noHpDIKblv+wGFIAiArctjvngn6fJjueOmEQiOHS7D2yxSRscxB5t2ITQbpDA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.520290a9.0_1615501689552_0.8738609589514679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.9ec431d1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-ripple":"0.21.0-canary.9ec431d1.0","@material/radio":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rUB1UcF8RxE0b9BCRx7g2iou6WWSoUazEb1ui7CKjR77cKslJeBTkQPGuKIfOVpcF3D/OuOBGICKP93XynRrww==","shasum":"13fcaaf09524514631976a0efd45060b526f88cf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.9ec431d1.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqHCRA9TVsSAnZWagAAAdsP/2T00HfrabjXoptOtdHZ\n1cg1UDfG7W5SGnflU/JsLCqwKWeV0Q3zmjfQxP+bMF/7NKtGHFX93uJrKlAi\nCY4DvXKEUQN/9mjZCDeByy9fJE+D2XGfZtlStsSXFuiAe7Uz8dnvK22NOyX+\n80Vs9f16UFtNmDNuEHhscnqVT6z3PB6uqb7lsKmYQWa1ijcRNQMn4fobegZb\nRKby+zKJFznrgFoS59VLmYYa4KkCwyGp9KAa1iqhAkAQiUtuG+LEIOua+v4v\nSCtpP58sO29fVMIii4fhga8I3fJNNkNMKto6NkY91YJhGpN4+2l/NXEI7H0a\nDc1O4yCIfMMEpli3fKLKfuhJeXy/Z2cbRKad+viBw+3ijxeNNiasRVLZJVll\nW7eDU07EVLJwp9/m9J/L8uf+VQPeL+YxGkUN/FJraIrrEYpLMzhv7ke2zBj7\nivrONZsIMW+OfNt3K1prNYbkvYuxkFspB9HNBz/K1u/jSOh1T+vZERDZXfBP\n3wVORVtycflKqCVC61sutmfd3HaEY+i2SV8L89g96KqY9jjM5YfjNFUqI6zV\nXdSgri/QSLh6GRbsqkAE5/oGgRX+AlligFm7E1e24aUwqSuF/u+efiSV6dFZ\nL4bLTh3nP909sj59Rl1jPDK9uJxLqD4G/ihjwDS7B1CuI2RXqSYNxdKW5zd4\nXV9U\r\n=MHEv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5thGq8nGuLUA7jVqRutSycZEJzJUewwmE5Xt7il6W2AiAxullNnZRXUfpCB/qoyX6YgoRuUHqyS3NF9ZXNDUcp4w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.9ec431d1.0_1615501959234_0.07526791557566415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.4246c082.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-ripple":"0.21.0-canary.4246c082.0","@material/radio":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-k1Gx9NOZvDrFRimFY5J/o3QBVBzpe0DKBiKIdA3UaCwpmAwDWZ72PcWhuLUT6de+dprKzhZZGshJ1ZkkaCu+fA==","shasum":"dbc816e1aab78fe5808d6fea2591c9b961c1f1b6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.4246c082.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwnCRA9TVsSAnZWagAAb5AP/iMluINIUBPVfh/Zu0nE\nz68q+hFqAl7wRieJUZ9UBZL32kbPwnJHTJdpBIvTyaXIy+w+GIGJVXANPduK\nmtOjurX+0EfaJv6FZLDVPfYUQGBF51M0qqGlorKFxEpHCelqYwh2i6eEtxuS\n46KU0TcDP0Z3Yjp0iiWcPqVquEQsk8qUqz7B957374BzCISzsNTPETVDfCrA\nfUq3hYYXOzLmALOveHpwgzMDl1DpQxt3RBPcULYLgWDX1SbWlrrs1oejYfbb\nLaESa63LevktkkusLIUPx5FymRJP75asOrHI6ZLspqGj9y2RJuzqKB7X2uMa\nZdxyKra1x1LBucqOvdXIbRAx5i6sLScX3i4w5bRnvTA6nsYmFilELjFrJNMm\n4BYDMmVfO2jFzywiImJfPrpyvNNkdhJJOPg31sjfx+NyJ/g9rBK4TI0vy4Yz\nqPgqtQrVzDlXrBjn0sf5MTqOf6DOIQEzYeNmrtKe1qzwY/qpW9lm3hUUpP37\nblxE9cKgHjibOXEe85ODSMtNDaLBo0UpaZ6yAhy/cHCfASGclFsaIP/+rrV6\nSTfot5/rgBpogCj3rtWUjYc8v7fajwcL/F70WY0Edtpe4HlEdizXfMDOR8Q8\nJjb0w/AebFFkfUAylkLytoS8TjYPgAGYL8B7t1pU0HeMqekQVKtNI2pb4QfM\nX6N4\r\n=u13S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyDIEfgbr5mwkPjAbE6Km5/aZcuMZkgLFACjyrmrXq/AiA8xVkkk0C8ap27YQfR/wQC0f1EKb4C0NMaMvAikXSjMQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.4246c082.0_1615502374983_0.30827177159438457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.2d736253.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-ripple":"0.21.0-canary.2d736253.0","@material/radio":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.1e0653477.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-96CaIPBS9pXNmZrfsnyqak/hTbcWkpSyQz5R19Bvs/VSTM2RRdCG+asThnRliSDP4FWbgVgvETOzRjgmJbpsEw==","shasum":"6f230e8f133d59c7f7350a2bcd9e8ef9a36f44a0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.2d736253.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FWCRA9TVsSAnZWagAAIWQP/1tNGgfhptPuLmiZdErl\nU7O2qNMSyLNjESnec1MkS7qzY+OYGstrfqhDFn0bNoJpgdZmgVzYcAy41D62\nCWjaXgPpuXYbcbczslqt63xVe8WNs7kAMfaB33iQaNMeRw4vzXiyKp6bHT3i\nWOVvBQ+Dot3KW5CoblvdBe4pKDP+rEAK+RY/7yDdZA8QdTNhyF0h8Gjfdqpg\n+NjvHUC6na0ElH8tF0f1I4HU1Nz2GQJW7xvI+YZxdqek8KBAROZ8HZ3R7V7C\nUchrEwtdiNyfMEFG6Ja4DVGIzD6Faa5pJS3hePshYhOFAIwC9M75PolZvlEa\n3EcYybuqEcgw/TPTw9kBJhL/R6VuUE/klZb4d+arj/HCdsY/afW05cAdNO5Z\nsosGGJbbHMEw4/HpgKRxI8TkjgpOzixImhbbY53p3PY2mHADWl9sN0YZHJ4J\n0sS4Oupr/RN2jPSOg3tYoOXyR9Hny0uHn39Tii4vhO8W+6/wB870f8Er0FnG\nWSI9OnYKD0aDKahN9zs7cZ5dZ3OB0ya6F09I66nJ6nQdt0k/Aopga14jXeS4\n+DrsCjXD2q+1viKI7PRjd8XEgYIRMlaYQXxIj3hk5pELO09lkf37bboGtm98\nwINXUT7t7TCoj9tx3TVAIR89vO1K4EOVGIxJRBzb4Sz2g8WUtM7BZG4rNNKz\nkGP4\r\n=jY1G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSpYV2QSpASDH5iaZC7g+MoUfPyjJIFVug79SQdBV4rAIhAKwipQYkTB4gGxWBT3toKLFzKgqVPpmrQw0wZjEaSYVw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.2d736253.0_1615847765776_0.27120008631583303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.7033124d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-ripple":"0.21.0-canary.7033124d.0","@material/radio":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.73a227194.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-X/IppaJiEgio90fMijmY8bgVaHU8KvDIcXxElU1cAfse0VLxtmE56vFylzXsVD7Z+mkD0nnPs1tEsc1ZzABRmg==","shasum":"dc664679a8ab9e959d96e07b50c691397f3faf30","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.7033124d.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPr8CRA9TVsSAnZWagAAaAUQAIgm83OlzcUGVvpJK3WV\n+UeiNAOAZzM/ySU3OFej/uMbKn+WZw4S2wYfUvhqjqdIpIAJVe3OSKTIiNv4\nmYHIjrQ82+TetkbGPi6bsJwgoZrSMnGMF9W/aTbKau8H2VzUOzlAQAbK1A36\n2dcPpaq56a05/S1ZyKaNFoDESzvE7RiHCesgz7nO98tFDkIsvNRPTZ7aGHF0\nXYtFssPgGJH7JGundBIj1+R2jVLt7ca/CD//5gHJFbeAdDss3tPNgk4Ac35H\n0d781mz2NGwmZvFArwG29cZJb7sablQLOYvNBk44JNMj5kxDzy2XO6noVo9p\nhf6OXKlqhfz09mpdkpiFqkNQEllu+SfvEIJVEWSICkT/RTVXO5bRVNFadIGx\nFJCJnjX5Xyjgm0eA9SH7AySqelyBRgtcIwgdndla9r4deZ3+vXiAQySL39Tp\nW+k2iksRxafISDVsLfgaJH9dE5FZ8GYL1TDnDE4AAyqyIA3Qb4Lk3VHn8Jyp\n2NQtj3m1Xr9iOz4qKIJLHYFIQR6Bzxmiav1KILoYmgECla7bqY2T5Gw9nc4w\nKuVutwnyRbr+BUQMWOkSyODxIAh8235ZZsvbOwQMXZwA7N7RrQupg2cLNbl7\n9xXBHfJT7E2/hJmwDCaHDaEhMYkwr7KewMr6tia0uhwWavCdIW+e/CS4RuIu\n+ZLX\r\n=0jyP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcvMIAqxWhhHZIeDs7l/zu0xikKJ6kOtABIbdF2/fnJAiEAo+KV9QD06SCXYqXBK8mTpuA+odhTv4ND16KqpOGCgwE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.7033124d.0_1615919868063_0.26741693113798815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.6c0ee901.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-ripple":"0.21.0-canary.6c0ee901.0","@material/radio":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.73a227194.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/eVBkNL8dRgqTalsiTg1CdkpWR8Rkp6b5t+VbeeGpCyPxeCfRwaJySwWbevlvZkxsZ57KcVznlJAYsOTCNeI8A==","shasum":"1b677a43ff5ff7742846b0e710ab30a67c26e002","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.6c0ee901.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOUCRA9TVsSAnZWagAA8rYP/RE6ISOILx8DWplarRyG\nHAlN0eNp4qLOCN0aaJcYAg3J9fR5J7ytFQsGfGbqEVsUnuBeLKX3AeaUwvnx\nAuoowzaro3k9JYhHVo1yOY0jrIYSB2KuBZKl35YO2KODHISHQ3L+J3UL5NTB\nL4LsDXmYi4lv9MrVkbc5iogRPMVlituCEhfS2KRfyVJGdAbZzcN2VxrHLXaN\nkiYOaDjlpFj4Bzg3/te4mjRNW/WKeEy0UHTPXdY+9OXdE6fSpn2MQI0bJRga\nP6Cs/idoO7UNalw0zO7v+qT8+PhXvsphLKoDLZV/01gOTvcwhScpn8WQiKD8\nSUschP4uBas3BTWNwbaUhnCZjAc8LMZshF4Fu1/yyo0RRNOJo2PDpgTaCJy5\ntSbNpVF8AVGBrQJLRlabID06tun4xbWWmpK9PGpfgnnyp77cevTQ4GXaku3+\n0caJQvFmkC/Eb1JF3Xx2Z9edIyL8LVsQAgFCMCMUlHU1VjQh87LQk5FRpoDh\nG5Om10Hx64i+Cp/jctVZ8W5B0lfUwWTD4CzQlEsmW4biuBHq1qqp0CpW/crn\nnbW3NxB5iwGzkmkpGyIKxIBt2d+w1nPVgwjJaSYaYj1Dbqv1AP9yPwxfIwBW\n4u+vdcwnFV5e8WSuATXyjdZBFbVU0xFvrZQbkIpKy8GmOQtC1ATAM9gnrHbL\nMG/I\r\n=+R/N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcvzIU5u5e6bUBsmKzJtkBc+QTE9A1Q1BRhJGMJmDk0AiEA1DJ47jLffGzzRXZiUbFBA8fO4R/zp719uZvHbR2n0nY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.6c0ee901.0_1615934355838_0.5886984366290704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.7f0d605e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-ripple":"0.21.0-canary.7f0d605e.0","@material/radio":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4/MDPYG4pL2RFgThH8COZVtCdgqedZbV6GywRMJBJ8y4Jr9haNsphN8NawEH3KhM1HeNjU6jD6lSXwBw3qfcxA==","shasum":"e93e47279402b219c07c557713fc3274ee54552a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.7f0d605e.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTMCRA9TVsSAnZWagAAlxIP/jcgWYVEaA9zY1v28QF2\njZutGIfZVq/UmAkD6q2jHMhpwIpFTvDbeUxJXNiHztoglsGvC/YmDzQ7vMAU\nHKcStSs/wwZWLleCfdwjyGHvlUZXLg9v0+jJMiB8gvuqZ7q/mhMEmcpeuWBA\nmxJEjsnf0zczu8Bbd7lVYfvSfh4RRQkdz9sbcKIkgSCRbAmihsI20Rmf4G1u\nEC4oNjG4VWOAQ0q9Pln2XHt+D/FmZMRuvv+8iwOs3656PyhVoDoWTbsY3xpu\nFkhGSIiUPWES7ZCMMVGw1mDOcg8iX2cep//d0LL5LZOsP1ssCV0k1RPNYLKN\naRAJEFkH1zdp3f5t3fiuLSGK/pMMBdevgSi01Slev8uc8qr3ooa8WKtCuyKd\nMaEHm9YAccFclx1LrCQ8WeHlp9GjhhgBobvo6pocqBK4unlYa3PWoL5/F9f2\ngLJ+xUfeJAtLAsdJ4uHrUKlxalWm6gqOPXPT4Q05o7hWTJ3R2BYFfigqxNGP\n6pb985ABYsPjqjysRa9BtTnSeuc7iJksDvr0rCqI7csWUN6ib1kMRlXyYxo6\n4QLsKTMmMps0w1boyw92IH3LFrAtIUTC/beQcF9HUf/wanWaSun3+bKi0dy/\naJC91KjysylYFnQP3Fe8yedd8O4vlnrdj8+ls/uTOm4+zSSPAr+S//DoePpK\nh6sF\r\n=pTZZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjrpPqNLnWUCuqL9jIYPXdUo/RIn4KlZ1hs8D51W8S5AiANBjIk2jmBYke9vdQ7DjiYDcTQtEk9Vq5/erYHBnkl+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-radio_0.21.0-canary.7f0d605e.0_1616004300100_0.11004403376666261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.572107b5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-ripple":"0.21.0-canary.572107b5.0","@material/radio":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KFdR2umr1nDayz0VejzedcaopBLqiEqt1/UV+aaw9Nd3QJtF2HUaMGpZ7PCKLaDY50tVllhsRV1j8wwaCpw3LA==","shasum":"36cfca493b0e300adfd17f4889317c3b22eb09e3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.572107b5.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+g2CRA9TVsSAnZWagAAEawQAKDOm5sJdedbGn0IHa/W\nk+wvp3W5RcwYmPE6v0hYyRn4EhWnStMavM94rXuIVxfmwKNiB9viyVzv5R1d\nlV8I740534vp7zXhe/VA7RGD7aFpIry0BinQsquVRZXfHrPPvfV21iWYNomi\nqFjrBSOeSQtRb0AGMzDRIBZ64odbc8U2fNpRcwP5a/pYtq4cKTMCNHcmiKYv\nYPhOsyqVCFDObQP8m2XcrIO98wkzG5QWRihMFWeZUCKQnMyN8kJhUYpKJc4v\ndUjSie5FmLX3Zdm3PTDXm+sH7HJcrOE4UeEvUVgFPCWUBGpZN63zTBZWmvbN\nSeBFy2NJ1UX7heSjJgh420fxPROTI4n/uGAj0Pl8bGWG4jZNthWnLGdEezga\nzgDJRR/E0ENCbhFngN+umbfvSLvvBb2/7U60+Nb44Q4MCzcpT/+waHv5mKJq\nymgoqcRF4qx1VDV482BaA3tpnmFjzVKTFI52HPqcxDAA63h9Zpq0BTYBfV/2\n7tQs8aaH/BW3zDX1x86UFh1tvtEGk0wQLx88+GBaogae4JfzpKUUixTjKHIY\nfWw/AKWugecFGuCqE77KHRlXEoQXgEOJZeK5SfhgawZwAJr5qkH4VJcUx85u\nbXg7qf55+F5IfNA5LcIeA/4JkRnVrQn7AkZKmlNzdZ2MqvmyyGbPQ8UkBMfj\nOgQw\r\n=s5yJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMMIz5T5dB5PWPmKthdo+8qQCwnziBvm1aDvvV+yNZvAiEAkpzAg+frJ1jGdNxe5vTygmAMJuGbGcGq3UQDK0mxkYM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.572107b5.0_1616111669440_0.511919272100577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b7b220b1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-ripple":"0.21.0-canary.b7b220b1.0","@material/radio":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nV8Rov0XnXeHxxl2lMbfH7lOE1PnWbnhJKMkLifbqV6U/CpQ/9pdM4LidZSqlaD8UyMwc0olXVvmirjk1oAHzQ==","shasum":"685e4316764a5899443acdf085e7010dd9cb7def","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b7b220b1.0.tgz","fileCount":18,"unpackedSize":100058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5CCRA9TVsSAnZWagAAry4QAJ4mhkz2UVUmaAT4vZZW\nLHVRodV2o4cUb/A7cChGOo4Qna+afGqOx6ONhrJ86CC1+MEOHwKkcegvn2c6\n1L5OOzOu0s7PqchONc8TJi3aCJ+pjmra0Tv+GPY45iSTGe+ecpubLp8BDv5E\nTUHn2WgUZv+sMY1r0JxBzGD2XK5aQImjCdqWlTZWLhqaAj/b1TQaqMt9Acst\nMhNYSRCdpkzhIxN7l6UYCXyZMjAMFyR0Lqh2ix5xD1N54tXjqA0+ERLwJ62B\nezWRDfT86HjL3IMsE/K05ebyJzWaZ4D5TAG4tiM3EGJu77WQwIR5aKEyHEAb\neoZk8Mi/oud/ASrjPw/ynb50Ld4lasERFDjRxwKqVoN1LPGiDr8Hucv/eaqZ\nq0BGrkPYUNU+Am6cUua80+XINTSmiDmFPaJ4oyOVqdDmqRY5CLXkQoZ20Uvx\nxq0ivAdpWEc65xRLFXWvlyBVCnFaZukbXu6fyelxWcGhRtbhuE0YibfwufCX\nWRyfsYzCRG3080sp32Ee+cJloNhpNC2SD251XyygW4HFwHDhH6+yZUeEwtsJ\nbA6A6KFHQEvg+uRYsOnrtiDpf2G35SPsWdn+btLaf/xTe3cXT87UpojR/Eqw\nD5iLcF5ev9N9TCIAbAzgcIP2N/Hs9JfugxYf1bLiZjnaWoXOZFHW75tLaZeF\nvLRd\r\n=ec9D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjALc7BmoSrx6fmM5wiCO5c4gV1A7NFTLhjMwpnYPTBwIhAIXVIkcqV1IWsLtTwkblPby3fVgZkSKKMca90nj2IQo0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b7b220b1.0_1616113218493_0.852587835265876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.233b2de7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-ripple":"0.21.0-canary.233b2de7.0","@material/radio":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KY8Rk3KHkPzYlS/MNQELCMYFTbwwpQEcEnvRcNPM1/i6TyVwdKkjMqWtZxITdYh5zQh+4okflPha2Sf7d3LU0g==","shasum":"86a62129fb9f6b47b95b502586c383bdd46ed982","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.233b2de7.0.tgz","fileCount":18,"unpackedSize":100067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2xCRA9TVsSAnZWagAAl/MP/19si+zx+yl2iC6U7eTJ\n0s8aWBmEAuLv3GvpLPP18n5NASkSrCw6UmP7i8ZZCCiSG/p0VsK4M015g5Jb\nBDFHNN9J3C+AiyUXdDyNg6ew0t1nR5xw+39WxXi9UTgiHSsNMHAZOxCmQCLN\nF87Thw28gK2bChEE8WOllDGIGzLa0YxyEJcLftJR/XZyv7MbyOWfbCoYd3tD\nMwCu0YJpJ3RFnt66z8sIfji6Jz6dg+TsxVjHs2rAtI5RT0hqXIUhJvbR/sii\nP7nnonP1JlLn/HFC8tJjBX5OOf3DwwvOnDBCCtgHBtboC7UP6P4tZT0wdRti\nBPq31n1taL7Ncv2UrgmM2kdDKsb1XD3NvwY3C4T6j5ROXNl9DXQXuFLdbokr\ngWhvugI0P+r0fAgsJBjlxqnwqsTybmuYf7LXsOwjd19lFKwZRV+6vhkQjnVF\nfhkQrv6tXCFebJiAuT7IwbY4nxpspnDZZd0GU9sVJvHgeHJWx+GcpTDxZoOE\nUzx1HuqfE2O6VKLkz90EABPNe1ZXOtl1GO+8laU3QAs1I83zrf6VRKT5u29q\nyjsgjf/Z471kQs7RAZb6ELaZoxWqhv6wi33tzx7K3p/2hfuLoH4uWH+xm+Fj\nTNOTTSzpA3Cz21eDiK2r9gEVdGrg4hEJP4srHwGD8yWGIWBJtRQawnDccUmT\nYsTq\r\n=5vb8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcqXmzMoWuAnDrcI2gqn8Twwi2SMlfhN8B/x/n8R6nRwIhALAqSa9P8Ac3lR0qDDaf4Z7o7QjUBxdKzqhXGHWVIcLy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.233b2de7.0_1616178609306_0.8830271737374769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-ripple":"0.21.0-canary.0c1a2d97.0","@material/radio":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.941ca3b3c.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DiRPabfogGwmoZa79jE/8AvpBJBPMkpnO9Pufxvxt14PrHQ8BrI+ZphzryT5bDDtwy+ZrFwUTeMJMG2eQViAkw==","shasum":"467b6cdcdc31e5553c0cd17efafadc48cd7364d0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.0c1a2d97.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXdCRA9TVsSAnZWagAAZJoP/2afBmq6Wf7D1VX9RreV\nLKGgxh4GjLOisoW04GGMlHviiXJp5fbAOJT6KGh9JCdRqZs0PfiTo+rYwUUH\nW+pe9l0K6Ox8y70a3mCE5aZfJKCsHZG/d9RlZkRgvg9EpZvrAmzZ3YIGyMg1\nW18rQMlp3zNry94KzmGuohGbPrvArx633I+eiT5MC7q8Mi6l++NevvS6tNHz\nhiASUX6FcHKeLYVXtp0Kw4fRgJb9BXtxR3UbYvm66G62OMncT7OQLwPRXxLM\naUCmB8JVmc2vAzSQXHBte32JBBAcSK8p4V91y52UmUOw+xVtnKlFauq/Evqb\nmne3/+qct/iYu+bVfCfQyd1HtxgBnGrjh/Wp6lS8dV5FUeTRmJcE6OgB6qfr\nKDiKOanitUDDSsK3WXU9WlzDi6rza6E0tOpvrXkloyxyNG7PBsDb8OIBt7Fk\nq20DwBdi982wVPbVaSl8f4kUANINY2xNptfBVVZfUngWmE+aGcZVVX0FJ/vc\n9nWljvRtLtu0JtSRSQEAeQQUCzJIKPEATJmwiDkXsX3ASslaUJZZAMVX4L6D\n7eX1FToasDM4FEZPX+KyVqSevQjuGNIexTLW9X7pnTd10j4ZViHGZbzJuDQ3\nRWMWo16CasivhOalN+V2Nyf74+P15xYdIb77QvUKH7tEiHtIGUPRkIeH0Jd/\n0TaV\r\n=hp2U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+onKHL177FPa2uNlg2ulxHm+nNTkETDiEo9z7l+PIJAiA6yo3bVsqrf6v7OQ1baEnDgXJt+vzDENlLrmPFQPgMVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.0c1a2d97.0_1616188893113_0.5785360910692188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.57ca2e73.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-ripple":"0.21.0-canary.57ca2e73.0","@material/radio":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.5f0fc444a.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YQpTxLzFMRFIIbgr2V06EXMPwWdSActL9NzEncl8v1d/JUY9Oau9MMfZTPzyK9Hfm3pIR9nPbxdB/T6Ma3SF9g==","shasum":"4c48d9680925f2dc944ad8ab72168aa0f232056f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.57ca2e73.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSiBCRA9TVsSAnZWagAAusIP/jXXlXfzOwoBD18StMRJ\nrlfYZxbmYrFYDBnKhL7zJ2U6/g6/qVFA7lkX2JedlnocqFPgJG9S57HvWaV+\nlrKQS7bBhssRbOBwXGODoLxCgbuvcf2KCVs1JkKizCU7+f/Lxy0T5ETk2wFq\nEpu/c6L43gyCWHS/ypZBkIr73ac0u40mw/EbsRIWBGDnGx7iF2f2Qq2qZGTz\nSCBYVYC2TbAaqtr1TksCOqGRw/zsw/X0iUU8xYxtEZNnUum5VEhqkUgcJILK\nFUgQF+TvpHY2Pjvj7UmEEpOCPcpQZL/Lz0eCZqtKTh2cW16IrEw1+bHSdS8C\nzzyWPhu3ZK2umnm0MiIVSuHkwq4jq66PexwwV7GYmXoy26KFusIN7XzsVKdW\nN1KDrH0CSBLmZ9UpchAFVZwo1lE0ot1RXlhZVk4ef4LAulCJgomrlBUg/dob\n73S6C2ViKsl+eQl4xceEYAiYTgWtTdFFZAdBVzCMg0WMmQa/I5YDslHI4/Th\nsXO5s0l6XJrPJkpLIWmaVYwTL7d6WVLLhfjpR57AgKip2mDwJiZe5mKXA+/z\nxcfMBUYy0uJeaSTO9lG3zcjFzokEzy4rhP6WfOM/vEj1TCd76NDbFz9RpDbU\n8iZBJU5E7IST3V8lHmBV89hJ2VRMtMuHNXTaGCjYW4O4/26bD9UwPfGVK0jw\nLelk\r\n=byBW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFF9Kim1scYUMyDK9g5HnkAjlgzVw+vKPG3X+uKYdObtAiEA/f8MtyJBgTom4rBiBWnapvPQIxoz1X3vHDDyIXXmYn4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.57ca2e73.0_1616193665505_0.3489779119481071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.5c058f4b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-ripple":"0.21.0-canary.5c058f4b.0","@material/radio":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.8943b991f.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hgX+o0oL3yuE7MQZfCeBTqZ7J0oI/ig4ebYdJU5GTCz5HZp6Rrhnmy4SB8iKU3+L+LqKfl1HOHuPKKjJVZMWwg==","shasum":"02434e90821668dd3d62cd5341e705c8f170ca81","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.5c058f4b.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnT5CRA9TVsSAnZWagAAOEkQAKLwNtmWkPhfwxtKIvJh\na7WLr1YRLAatI29oV4FmCRAfAYWh3QhMJmxms07CPPe/t70OWDi6WrcK4r/m\nubo7ikRi11+XGZOpfErtkqQfrLBt4eJ5tQCHZLRt3tFj6fxPW303R5rvrez5\nqb5y7HvXZgTllDzojLOpFS9fvhhrzPen5+TyYYx+/XdqyGOigVqeApPqa4T3\n89rr2ln6b0eGyCz1/WoAMdSAH1HnQOhWXYVlyim59Qui8XdthOjPnMYObga8\nu/G5uRFwKBzBS+FvTwCjNetWmJ9Da70rPhE9kJO76pXnaxyP3y9rTsP1hsQN\nuYbQmKrCpYKy/Cv5j8bL+70RJFtnynZUUxKpzPGh2DM7z2ZUQoP6QfVh0HrE\nZ4rS/q2mF6u9NZj52YkgnNLawEPv/k/3H5UfxZ9qgzYe6EWa48p4XrCVSLGP\nDtX+9hCCg8p9Ni/SiFvS3OiOSkwXzot9PZoN53GAVFG9YuIiGnVlhsx4NRN9\nm7rRtBvdapSIzJ+BVkHpqQYdRIH4uFmVoMoI0y9nFpTYOaRvQ9P+tlt0ajgt\nlGmYu8kJVZd1D5W0FyzmwQJiHXKFBNAPXArM79X80gIU0PK22In8H3ftBGTA\nNRBY7IeVts7i0mZPi14tpwLmEKZNfkCScc6/OGGyHrRiaJMfHACHa6eGD4K5\ncXXi\r\n=7elg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKuKaqFmJ492ksRT8PMGnhUMFE/V1XosqwXry9t9AK2gIgT6piaNWk3ykX8/fW5gnsAQ/fZW1h5Cj7X6xoxAEoONE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.5c058f4b.0_1616540921526_0.15385304128113608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-ripple":"0.21.0-canary.e27ef7cd.0","@material/radio":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TU1Jn3j7ypQc1BAn9aETPaNYJv1rTmX1O6WbIedWseRQxVkhctd4H9ts5kkZdGTb9+kERPe9W+8xvoszxR1hLQ==","shasum":"0ae5b66fe061e6889bb08ce125e129bb9185ceff","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.e27ef7cd.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4X6CRA9TVsSAnZWagAAYYMP/jss4MZczPT1hpvO/KvH\nMmu6hqKe9e2h8lt2AUTVzdG+HDevZeifsLi1/yk7F4GgbQBKRxAbnfUoL5QD\nMmCRQG7JnpdzBYQlcGRm0zJFSws2IozkGT9teZbN8k61eH+R8UPDGHxOQ1rr\n9TAMfu4Xw1ECnQpbmkVxUiOj+sa+EhanQzV5C/FbefdNvKqv03j+RRoXtz7F\nT2kdYD/9zEOXgLwHuIJGoshAA/vdaVj0qyyN1Jh11em2ip3SpBFmcLnDTSPh\n6Y0rp86rk9zl2mPxDi2/oASC9yRIzJHCpnlbhWEsfNsZgZHD1rbEOeBkD/Ua\n1o2hg+EzRRPUQN4BQbojl3aAJlJT7tmfcxnQ/nkBSltNipcCoqvjX+Y8PVjR\n6z+IHhOm0FuJab9uyAKUiK7Kx3/aWOKZJ+u3e29h5TnoOs1SeVznZY4WmS79\nPRT8kEiEOVIpqH0cE0Y5brBbqVpBsUMgYugSu4R7UU5jAFNVp0YmvN4BHUwr\nVYc90KD1rB6jCjVFFtSjFXpp+nyCe68Oo5XZc5BTEK8DG+U4f5op2PvObUS1\nSfoWjABw6B2eQE8npQy1/LD5P/23H3Vt7PLkhuN3lvEMnJJmw+VrNq1aa24+\nkg9gRgR+tko3H82W3dSAeDr8H2eAB1g890xeDGPQmasxzH/IdUs7RqI/Scok\n7x2b\r\n=MRUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0N0eaVVCTxkpgkjayZx8o28bXeKVrKVs0UPG87X5ttwIhAI2NrPUjMbgYfNtFUagH0oQNFy5xwThySZbp9VVXajFV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.e27ef7cd.0_1617135097589_0.8979073842275671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.15c09e74.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-ripple":"0.21.0-canary.15c09e74.0","@material/radio":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Rzt8mPYAGFK9iFzzdnHLDWsLtH5hx197/0r3h/WOdPla7efmN1YSRrQt8n7FsEblAE/luug2e42JVznt4biCwA==","shasum":"11baf2339beabc09d211c7c09255ce9566105ba2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.15c09e74.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKe9CRA9TVsSAnZWagAAa88QAIkcdbiii0gX97Wd+ZL9\n1t4USh9/VAs1aQaz2OEOMxxYnpPWPUd9x9dkVWbVRDEC+WsVsaGGaQchfFKO\nB/Otn9exEfaOdf3/ni48mXBPwleUKcWyP3erA26ogWmQjMR3Ybnj+vI1leBS\nAUWRlZVO50YQR15MzotDCp7Vpa3a0opDvxGAo7MAuEWFQBh++qinP+3XH8Bc\nH1Gtqqm/xoRlU6BXnnybHlQxNKL8t5KKo+zON8Fs1a3B0TFpaqDmju1MQKoG\n8gnO01VEs0yDEd7T2F9uqR9QmgU/QCze+Rsnrc27r96xYNTjBvdbxwHkGXnz\naa5TNFBfi/uLiGpItMi0cXY4q9IPpZsXSM4BuY3yk1J57UAyUUxLUwxdVUoA\njofC6TRDMeVFHq+o5Uv51pHSEFfYdwPeKi2+tCXOoqKUaXb8ZjtEoQ6nBEAw\njRHCF3EoY1ZxdyoF6F0nZknjdvgXENIAL2x6c2S27iHKOddbDl1wqJEVQqxb\nxS0rE2IqnVf6SvrL+/a+7jHwojHLfX/mWRfAkwBumXVf7jHV/AuXAvDSdgUQ\nQ6s9a5qAAXhz3HX69PwYricHeDCSQ0lRJ/oQp9PwpEWL+zILLFWPI7vlocC6\nZfI7LsCU4s7gFR6tobj8UX4vau6X9A/ovBsAD/JgJYN3IAChUYhztUIdbHZi\n3d0A\r\n=vdZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/nsI01Jq0hZBRhaQBm1wgBSkxEQ9kFN9Xix7kk+6LXwIhAKepMR+OqBksOuOpYfQsfuNG8O1K231QhUhUeGTtTpS9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.15c09e74.0_1617209277281_0.8096994611805395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.4dc32be3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-ripple":"0.21.0-canary.4dc32be3.0","@material/radio":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.dc9c84023.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zzUdJdWXoldblS4+2JfSW4vwYfWU6syZMxa9SHJFILKCDUQXV52A8hVqettqbSuK9vvB8oeBnUR3h3NSVJWUdQ==","shasum":"3481c642a7f38343b907dc00833bfd498b74fb0c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.4dc32be3.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpOCRA9TVsSAnZWagAAdScP/2VwYduQUByeOoD+/dbU\nnos/6W8awZ6Vgd/WKKeJvSCfvq11GeyjtgDiRpCNYLHMKxj9Q12Cs3DETO+2\n/xqrEB+mqs/UqanF2dlSyX6UfuJz99JUq5v3wqUW1ahxEB0FSwuX6CvziZRY\nuPgSOn+0T+3Ju+ArbPYfBift7UwdxXX0RkbtAks1n4uAMUmBKX6x/iipRZYi\nZ+Xn73JK/7prlVSMsuUgrmpVfowlxuxppikNkHxwlnwC2AzBCRQYCIN/wk6d\nVAmoA1NeJYmkpVVbhXZ5tfgEGCDUT9N/WMdmKBwb8OFK69RzuhWWIf2oxmph\nO/vAUSZSbgHZSGB7oMZxlgN+0T2pTnRpisIwXgqbVMVsnW15IMw6a7Dtud9Z\nDn21FYbLH82qzBDciB8hSOntvUi8UmazKPnbMRMRuY4CQsIBPLgWi8bUXowq\nEG7NzVOTsT7pb1sY0cofiL4/ZwpDn0IdTn4A+UuUaJJZrqTqNngi7hDmq7qw\n2KZiIzkrPt+ALmFtlZjNPMFxmwkGkIW5ZCdSel2fedqRP6CmAjPId0XJt4kZ\nvdtPpbfnjBKkWDaEPIVssATmOAyTqMSgdUCNl/EkSkxRWineA7oiNrkVYYYc\nY8AbbqXIx/WhPmPHiHogo2grQRHTzm9UJBIwwLc+JB6AO/ZGvro1Cc6CsZhX\n81Yt\r\n=dmaK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCq1emDXQu8H0Qm8RQskMb0ROce8x312O3uP1Ga82P9dwIhANJN6/LN2GgbRyQB8m5nc53H3uU1SF7dLwuEl8eVZrm1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.4dc32be3.0_1617234509593_0.6951160216521206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.4b717f65.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-ripple":"0.21.0-canary.4b717f65.0","@material/radio":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cF7nZDQ3Hox5ny6EHuMCMhwo7wxa2+olinNjk+rdaNATKtfG6Pflc/7GKVUSRwiR6Vvbv7Xyg+htcvhkC8RRiA==","shasum":"cce93e564a44370a560c5a5e3c4dd3f9c2896c36","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.4b717f65.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2UCRA9TVsSAnZWagAAq8AQAIqr1q9sfn+v1bRORvv/\n6A5tcuAdxHBpdTHH4gmUGuIsEKYkL114uUP2NKN4V6n4/x0ZMmcEXclu95TM\nlUDf1STHhbkNaaVdNPJ8FVrWObBLxzl+Ex8y/GNgllL1pJPSP8GxOqrw4HJ2\n1qY07tx22QasqfdZBNzNSpT38M0LnGsMYhAXrbMQaWcMHf+9NXSlVRf6mbiM\n8PF9QAMaN6lB6dAWsbqQaENiKqxKrn6cE9HgPH5Yhwch7F8qpFPfAZ4rCfB+\nmE2piZfKnxJC5bWWVjv3I0WZe2vQY7lB7yH6kgRlQv3LVAB9iMeaFVGhAMc0\nWX2PDhGWLLAkDCJl8RKWpiuZHujnpNeg9W1uAF1vW0dJ06FmTn68171kRb7o\n05hHE64w2C0Zor7nhEdjqzLED7TEqnPa4Yvs1lFo6O1gu9DBmEdJV8eXZsVO\nIgahUOy0EOXnvHk4EbsyTdBIF/MS3s9oUyMmnYsfyUY3+t5qnLmShUTcOw/k\nk0SjTsm5rbVbFs3N/u3S2VOofm23bg+Rme6TGqMD8iXPinRxEevjUsLNYynQ\n5fepox5xONGqqjryT3GYu4EJvYp0fEqMe0VsSqD+yneBRJuCc9XsxITh6oaQ\nlrgg5jujPVk1ulTH2iB5AixoFcPUm/dIXK97FlrC6EFHKBQ1NUs1mqKwaFhP\nItIv\r\n=mJ8k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD54MGmfs4JhNzY+Pti9L+q78qzoDpRm9+5ihl4laiwAgIgblc1d7/JoOUK9heCN0Lj/jn8Dh0I1stzNTEEcv0Ibno="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.4b717f65.0_1617300883669_0.3104016456114427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.c6870f20.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-ripple":"0.21.0-canary.c6870f20.0","@material/radio":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/1O+vxzBb+6/nJPfBKup1223wTKW4evSaQScsfw5dL0NPCGGNCFGIY0wHvqulWsldram/t3L2FLp4nIpSYz5Ng==","shasum":"a34f11c31d181d490813180d4282661c7e7d5e65","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.c6870f20.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpbCRA9TVsSAnZWagAAenEP/iRjVgnugXEPe7Pyjfs4\nMKpok5p69kMTGyIfMp6bOS2yOrvfe+NxXNjtHcOdfiQdqeDv5uOaGO0CZWrX\n20ENAKRESk9EB4Q9dE8s3HLFsVR0ZyMMUftwy+QIrh8eJreT7aJXv3kTznrF\ncip3mdNB8rQYe62R93mXs+wc+ZNtFabIIAUc/JIOf+NLumnV6xCvKN7rHXPa\nQdQCO5Gjz7i0bx9OJQ1iexOBJJA0QNDExmapXdbiVrgr3k5q4APL1eX5z/Dt\nBXwKYqI8P/MUwFxKpAoOwZcwE5twiBeqg1GZqZv0BKDcHoP8i4/jCvZhpSEH\nw9vjrAfv4FDJrQGLP057+uzLawdSEqZ7/5XM+UyQyE/WlhEkMqf6KWPFehg5\nTSucntiqGgwHSReDZYVAqV8AvWnpYJQVkUFiwR6sONRGf4QEiyxtvd654URU\nZLKlYKg5hlg1HlyqX//uKcENv66fj8Bp1wMVvHk6NoxmJltQ4vQVR9DKmFxr\nD4p5iMRbYGDh5u1MX1h/4SP9ykX6x6coHqFYXVRvzpJdwY7Ryy2VsIkg3HQl\n7y8FpONhNhFuUeaQHDpDoPOsBZ5qANTIO8tktQf1/XUUDzAblo/JKMrvvCiU\n96bBwwJfgqzBqYcLBaXdEjnxVCI9/ximG5Yvrp4coJPd/ItcGDN/zqHUKhbN\nwUph\r\n=YBpR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCqMWiunOMtWkxy9jrTJjwSkowyNdZ8MbQqgn/0WWF+gIgQ9ZXdH0FFGmQycO66bs2xxmM+DvoyalSfseS4U5fG5Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.c6870f20.0_1617320538856_0.18239442150674945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.852f873c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-ripple":"0.21.0-canary.852f873c.0","@material/radio":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-s8KSbIrRWxyaWWvwiDLq6GnkWJqb5eDJ3bs8Ha0U61gQad16a/sHtUt/cGXQ5SlI8anscWIlkXLT5sxyCcJ76A==","shasum":"85f246a72e1e2a4f3ac7ee33650f1abfa865d697","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.852f873c.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqoOCRA9TVsSAnZWagAA1c0P/AjimvqJsH2+2oACjVIU\nqp3YHMgRi/uowxyJAfDzpI5UAlDjUjA193WtrOlW8JQF2R8fmjs1snrgMDNZ\nHJBk+KueP7jR6fYa/KgyOeH3FhCYLMkInNZu3aRhOjv9csnfL0IFT/TFMOTI\n0DscZhuVKj5340/2mir8QELBHc1wY+11PwGED6thYYLA+lNr5+tauzUypx3e\njhMFZ68zsmww7C6Q6p4hk9E8DMOgxv+frVvEJ8xQFtOqZC7r1ZMWAcjWYN02\no/olx/thvzE2umeUj6HxUr3sxfus9OAnEoRjdFG5WOwn5Bi/qSASfEe/mmFd\nvWIOU7UXU2pQnzhLWhKLvEpSlCBH43jvemKUz94KtTqy+MBFA8yCEz12UWru\nNYCO1Ox4svikd8Hkvz9EAhxVWDpBJH5NzvOHHuND8OeAfT7zrYSk5bmFmrtN\n/Prd1B9Y/fy+xbiL0Ck1aVxkyoP72PMiLjAbuwnDt2ge6fEkaI6XiyJWT9Er\nxyJHTgZEjtIonDQhLImKaKTaZgTaSFuYUmpgve+8XW9kWyKgdTEMxbyO1jVj\nR8LcRTpdaqcY2JoSrFP76kDOjSDgG2YdT0QT2g+1Mz1AStST7RjPmqsKAZgh\nv+CF7+FM7Rwh4NCYnVidGp1xwBsyzlzC7uMfkxMqPBcWwqngc2BbR1gYZ4G9\nE9aR\r\n=v91Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPIC2R5B8dZwW+v85g0Adzg1x7Ye+5ILzZRzl7EIQzTAiEAl/EpBBwncnqQ7m/d752Spcah7NhS5DZRhF3tt9DGl64="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.852f873c.0_1617340942297_0.5709221824200634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.4a674a1d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-ripple":"0.21.0-canary.4a674a1d.0","@material/radio":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-T/nOiZ6or3SmH8KvSXaNLUpmR0putANgUevZSLCEEGOqFadLj+jj4+Wn8SMtC8sSe5lXQKtQTH8M55W17CDWdw==","shasum":"e8a1a706521e6cdee05c5aefcf003e25367f8f5a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.4a674a1d.0.tgz","fileCount":18,"unpackedSize":101145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3UCRA9TVsSAnZWagAAIZ8QAKS4HCIsNly6qTokotwn\nHhdcpdeTfjWRXxX9Nz31k7InsQxgeUZNJ16cPZy3HE2UsqhIHeHHJwd22njN\nszifuDDnUD6Ze+2MBu28T0GBZeod9tMVl/6qzK8hlg7ZNn7mJSoGk7Fyi4bV\ndXCzFIzWfIutgK2WXjZfmHDLDM2RLjdyZFUzi3rptRiPVediGbbvAwsl/K+q\nM/oskZxjzgpfgMIjtjrQk8pgwxw45MrOqYHhS4b9eB7nVhuuAhaezI5+bcu2\naOcnAyZnKkmuryClme2i33G6LkIXud0Y/Fx5aVule9MbhGm1XEbb5OTMmbfA\nAyRVxZge0+IcOFlTvJHnELPL7RPhlB/poVoQ08TWK6Wft0JPD7QzlclbXppY\nXJV86cjPq/pD43Qfwqzx3D7mOhJmXWDYuggxQl4L1M8FIi9VYCfvNrjFXGtd\nTHhjI8eOADEPWcMCw7wQL5gOdfi9Rzdt08plnShGDVMihb5SD4J8yB2mR26+\n43j5+98TXrMWJi6CeGSY/XSA8hsiGxTtJ+6Al3tD6tIl5XOyv0XQG5PgluNd\nl4IyOaNJVHWM7flZu3tVILZ0u27hHMQdgxdqf0TElUvBxoGIak4dzjjRn0kl\n+nMUQrNvpKuaj/+p38B1dPy3zAahSwgi6W+FuU+eE4ZMc8NqRrEjrCfFIsra\nbfas\r\n=wHdd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICqqV2Lb1vUgeddNBqHDfEK97cLQIGQYNi0na0KBSuRhAiAZTQ06dfmz3JG6gwhwd7b07aBFNuXFV2IPyO/X+7l3/A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.4a674a1d.0_1617374676086_0.19315303905919046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-ripple":"0.21.0-canary.c5b29ff1.0","@material/radio":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.24609b822.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-69A39Ce7TjUkhz8qLDKNStHXJtRi3MIjS0ZcqGa/HLpusnEwyy0VWsOOGRnF9Ck5WaoBsDVTBtn7ZmbDjzy1SA==","shasum":"f0d90b780698486430249662b2f1dc4fe9fa8301","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.c5b29ff1.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03XCRA9TVsSAnZWagAAYA4P/1xjd8fvFPkuyUV1xoIF\nCHK6fM1Mg4xB4UW22x6Y8zwM0uh7YsDeitJuMhzakHEU0fkTAhUuDKGgOAVY\n7AnjBxSQjuw30cFGu3dqMwUTq7CxpCg6M+5+ArLi0B3GUGbLzsBsPOn/nSW8\nHmzsYyNzgGC1jcJGRZD+Q5viUoJ1nbLRrF8kr69oLLhJH3yyyRuxGa2sYM8m\nhDRbb1PufaIn5fxYExSI6w8thGSJrKVdzEjllFNUigx4eKiv/w6jXkYI7dR9\nWMLUPmPZegT3eVQUSFRiitsltLcm6tJi+arXrao1GrRSaiBVVmnMEFtRtHcp\n+27DKsbvgI567Nv9yoKYBls3Rif8oo4YA9vFwPld7Yg/le4asvmgQgRzcWyT\ntgvTqRIO6rey/n+4eETWTVZttHNE8n4ZongXlEMAtRKVH6VXAqa78/zujjIT\nHhW/YxTCdKAN74sWxHevgZgBZgYmSF2DHZfLfOPO2zUrRqqxfMhQ0515v1Zn\n66zgQD0OdDYtFB6GN1BLzr6M/kO5PZGSmLhRXuOgXFE+OQK1pxilUCusc9hg\ndyb7loULGonDa7OpI03xgGHaXD/4cKfH/ZkPuXvpjBafmIeDzNc70ugPb13t\n7hXZHiUFVfdO1N+xM3BH/5Q6MaXGKP0LsHSludbN07/CloU3RWWkwsegPjur\nJ/ZF\r\n=S9CA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIgmX2iV6RBRikg2Fm0F2KQlSpTnnOpiggH4sRtGqfdAiBjfTvwfp5Oy2bUSqZHmOr7mWA6y5OonsQhreYswiVECA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.c5b29ff1.0_1617645015110_0.9585085952495738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.583644a6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-ripple":"0.21.0-canary.583644a6.0","@material/radio":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.94f50b260.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VBcNtVipUUKGOZtlKQVOZr9Ty2P7wUZDp3NwH9T63GyWvdziaTy89uNo2Lq+nhZtIhtU6rUS2HALgiPwS6d4sg==","shasum":"c746d6467d3f3425240eaa8ccd294effd7790390","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.583644a6.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04WCRA9TVsSAnZWagAAxiYQAKJFQl/rHsWWOZENmv+B\nO5VeqFZZo4DmVhSdtK+Ag864BQ3SgJrgxFncnyFkcgkH8ZpeBMQjlBRpLxC4\nr4SRinD1BeBTaRXMhBMpg1zhyME6h0/VVAbzSOhUTPqtrmWUP4oin/kHITNG\nA3t2aJ9ERLFli61bAOA/S7FVGruqNlxDGKQsbNaTWxJEBZymwkCrPH8dmpge\nFEwaei50Sm7kTITKU4Ttg/x/tXjgUHJw3tmbxe13iC/223UjPIukNBLDMv14\nTHV11TXLRB9CtvDphF6ApZRC61YNI7rMw5S/jQJSZsFBriddkuwZD4d99+m+\nnxgSuOGdtSCnJbodoQNM17a+ZT2/MoeZMrho9GiuZq+rLuG8Ck8xHiEcWbP/\nQeIAPmQrjAs1TqW7+qVWSCAwDPLGFEmkjF5IAACyxJ9tHxV4zGch56XOKQaK\n8Vn+vbkLoIDg8ApeeqyheLrtpYbs+MEUnUAnpQ1Zgr9zElfdSrxW8jz8w7rD\nEGE11BfKebrneMby+1I0cVZyi1kNI2xjPsMX1RMW/OYMbpkKGdOgIWlW328P\nnijA1BS+L4pGDOqhwzFHZSGmEoiDQ0iSRg3sIej1/WjN01aaAEes3k1QAllk\n67m/zWqKijKniJWOg47JriLpx0MiI7zG67cDO/AqmpCWrF2TqQETGnNwiQ7V\nTIlY\r\n=Ww8h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTmmUX3HKpVmHACS3DoLJLALllAmvvRvdOKzbi0vI5WAIhALf4FETEDPU2U71Oul1P1YQAf9o6Lcqw0pGFpHTHKVdY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.583644a6.0_1617645077677_0.012177886929929826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-ripple":"0.21.0-canary.02ac1e6b.0","@material/radio":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-B56+8R1FV8zkdDHBs7Gr8cvZjU2g9MSlF5rQyWW/3koY4Pnz5B32YUfXx4a07jWjdpiINREEy93VKCdNzv38BA==","shasum":"04bec886e69d0eb93c10413ad1d8be291c0826b3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.02ac1e6b.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKoyCRA9TVsSAnZWagAAxiEP+wbT3qFRZ7IQnaR5Aisu\nHuKcGaLGYuGL6e2z6y+N5AXXfX4SUL5D0cpEQRirzU/Cwo4WAiAGnF+xXv01\n+Xt5IZ0C80Qmfs0EMgp6FrLD1WVzWff5rmpyFIxM0I39s3YIKYGjFMUTvmma\nR4BFV8+p2dotTJyHESNnmb6RKx0BF9HtOYuqZR7PFA2DbAiiUQBDRTyXFr27\n/o0Y2BXZrJQLeHg/nBgaiN3K8ixH8up0wkxRxc9MCVO5Px3phnNr+6Telvrm\nwE7yrYArouhb+VVMQO2NG/TuXuBuCdw9y6FwbLFl81SL7OiWW2e0q5GXZmJU\nLMVSbu24nOFtihB4XFwsh6WqJ8seUtlRTy8Hxw0ZdT7QmqW7393jQoFFTo4F\nlpw29IkqFEtoJpZ2fLcXvNw7SpPA9CaB/NJ03YWqv6QE/OkcgixwlELz29QZ\nUZa5UcqEzL9zPHbN96OU9kPGKJcNkce2K13b/jf+ZOtyyZ/3nlog/oshbivh\nb1QuCuq8UAcC7CGSvYVDoKlH7/0QU/at9sKokal5FwyJ7VRn+oJ73v0khBXg\nKekj2B8YCVsqSSH9kXhdRk/RvC+5zVbSyQUdkWzzSGk4xu+LILttweKPpXj6\n6abp1OSWupg1qpTHJROtpD+ftqgIP7LCvpC6wEv5/jn8TgU5gHFBgL30r9bi\nIIAr\r\n=f4Ls\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgFo/DqwxCJPa86G14VGImmc3HIPB4iFz9SQ6RhaQ6dwIhAO+4kESvOym/sWvhAqEeGUdh0Or1CrnOIhRdZBkKjHbz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.02ac1e6b.0_1617734193685_0.09149295914055822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.5ac5856e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-ripple":"0.21.0-canary.5ac5856e.0","@material/radio":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-k899vUMLf8S6M0xIPPRatBJuhsS/utgu4S0sOB0M/mQhk35QehvACtFezxQLHRhBMJ4lTW9aezln/mmc+C+Jng==","shasum":"cc30faa40ff95125a5e6d8439a06ec05a0817884","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.5ac5856e.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKu3CRA9TVsSAnZWagAAcDQP/RIbFdv6fRauSRuH/zbj\nrriYTT9dbQznLBgXLnemd8+A7g631lGUwqNh57+APQXWiy3vFDsBKgCFGXIo\ng848C1Zyai0iD1//h0mNvP7P58IxCfLyAHIRlInB32OBnaRarVMS+0YzL90q\ny6nj0WNsA5lxsmm9JikwDWx6iGKYiYSu2ixynBd3nG6RP1IKqgF7n+6SgJX6\nzYWwTPMAxxQ6aqJgSohvZz4/dmxBWAs+xWjPV7ILGt/9pU82INjM3DiVnomH\nzDd7Dkk71wl68+rFNG78jrHOgNi7/NAt5I39+LXXmVGPcX2nmCjKEKvPMd5t\nESI2yHoXfg+1b39bsMJS75ZalK6Q0pZmFBivUm/L2+yA4qqlEpxubLr7xXjz\nrcnMzSVXMdb8iNRCh1GEyXySw/UR/ccO/kEH3NkFzMAvmkoRd/FYgiYt1bif\nU4FJzZqwVlCu2z6dN1p4gVt+bTEqP40+KBTIzhj27Fou+j9z65Yo1Chh+nva\n1h/QCmb8nHOY0ZzgcIpYUUUGZhlSYteX2e7B7u+ijKvwNrJzTlKjM2KWzcEY\nTDckkV+lWgTF8KxOPv/5W0jt6nl66YmXLN6Hf6vHpPG6V0QP7ZkusasLogAU\nS5kYWPhl1aPc1/002yknpY0KDj6ilBVlrc3orKkqsq8zNQWoNCMlJ0Eb1sSS\nRzjg\r\n=f9DC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTKdifGm3glnHNr6qdAyiq4hKehIGg3pvYneS9BKlYdgIhAMNn3MNrQyZHkHb84AK3QhioB3sesvpJs4qZlU2RdNfk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.5ac5856e.0_1617734582544_0.04867659859648854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-ripple":"0.21.0-canary.bb23dbc4.0","@material/radio":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.15604bd0d.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-33C+FtLSqU7Kl8cGq88jV7JtPviO/341aEyaV6ugKEiWBUDQ7LiLmbyMjVYYA0xCR53ugik0Ub/put/yr15Jow==","shasum":"b07c86ca5696bd8728a0c5e089320ddecf484a63","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.bb23dbc4.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiL2CRA9TVsSAnZWagAAWlcP/0H13Isf/UD4RJgoT+/L\ndDX31B863Mhr5DB9pOuCpta0llDIPpfch1QWQpB1+O+JAbajXWWTvmqtW3p+\nf1kF058Jey5xjoX6T0A7WA5pXblttATyLtyxVnXersNOrEyIZaXsuTbzRE+J\nSS7dtS6zSjTaBZb5DRFI+6v/twq2f5KbksppNei4wI41/8GYPj7lEAhKWdbN\na++z882XbwhT9EHAc4uQhwkYMrawMAVloUcb7dVEKJzPCPTCQ+iDMY6RHUV+\nhNVSL30RkBQvxqcL+LY9RXFJwQVBi0Xg25sVadi4NMdAxE+OcRAv6juhWTGH\nL4lab3+nuFsK4S3dMO97OTfR7nHuI4H/JcznYEyMl6TBgJL4QnOsynbwYmqt\nkK19Y/B1PhzYVwsJz3lorcdM0Te/eP8s1G0+UJ8yJHKk8V1qSx5wBnP+0q8p\n+2pKdlqkTpngu0y6E63rVpdBLEFba+UJj4OAtnJcrrKzHGmvJ+2hokEY0lZm\nUT+6S8E3Y6veOt3wpFriWv81e1l0FpvHbcrVk1CHwlQ1AReSrMkIk8K4wxYd\nP1BgEGp14evHbdifNE5e4sH1rQrhsAYaz+NJJDMJgh3nKuxYFK5fpj3e1lfw\nikDqlJ6hhnvCXpJTdDnf8nqqiwdBNUSVCco5/u8CRlxeHM4Zi6355jUnmoV9\naOvj\r\n=mmZ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfOdpAN+bAeRRKo3oEMW7GeeXxQETJEa7tbekKBKxOJQIhAJ5xkXXWwGHYazr6ocD+Nbn8qx9oh2toSWV6vm9BZBwS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.bb23dbc4.0_1617830645731_0.7517932230029882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.e539904c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-ripple":"0.21.0-canary.e539904c.0","@material/radio":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.c91e8d141.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-f8dXv7co9oTCbwJnBSw+L4HSm5db3qFJX2SXoVqMPdkYUklsKNkzBzPNovjzTCqEv5ns+PokaBB05EnWuC5HWw==","shasum":"6f49cee527a936dfac32c49364c65b9e8df6bd0c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.e539904c.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UlCRA9TVsSAnZWagAAtegP/RQPjQR6MJJxgIwf8AxO\nMbi/+bWLBEtQ+3L3mNskH5CfjTxVWri+UA5cq7pbgEE1mtZ66EVwlZWkvOo7\n3bg73R3QPQ7zGibUV7IAPBqF+Dby8QYPP76vb/AL90y2hoDYXKD7jDUti+op\n6Ca6GKy8fZCCa3aNnrHLQgy7g44gX3dU4DK04cF+7RvvUnj+xOHgxeRgtOpT\n/T75VCWjwxkUkYcyT+e053BnF9XDjEfpKnUQCrb3qggUm7dr1UwtEl3o0McH\nYlUI74oDDvq+N9Q38eTtSa0U04cctTcHbU7cl/ra9mEpTLMgbB+mqsK7ZGWs\nwtKTokvsTBKhHuvcMo7LoSgCwG5uO+rLGsBNkyw0C6HekXLlF8d4BbWvZfJ9\nk+cndujDkmBdyVJj14yvCQqzCAVWpR1kua2teg5T24dOGDwj4PyBk0u8tFIy\nft+R/+6f2uFsiYUhqspmnCkUqNgaW6RvUP3LaoxUXb7/kSBABs+REJFw7gcY\nmxHbeJqAuNpVVbDimBqXXEPygxLbbb+COgpqeqcEhfYG+A1hJuj4P2C9pxtt\ncuvvsaA3baQzBvm5tSMcS+OlSopPTSNHtP+I8sOlfP9YiVoUreJjzmgmR29h\nWGvseEkGzv1canoUvtPEznCf9hMCRkPFbTXuuvOa41inkxNUBTHrGdKPoHS6\n6kMQ\r\n=p04n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeEJ16AFJ6ib7ctXSzS9+ADGxjSWY/mBC9EKueBKsRZAiBzp2Mr/9bicdnR2Pz1AMbDb+yVN/P+IuebrmP9kUNQ8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.e539904c.0_1617904933150_0.024540619518524265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.a93ae333.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-ripple":"0.21.0-canary.a93ae333.0","@material/radio":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kkAIyKtGxMLQkCTWtwSFxgOdsBH8Vygr8mYs/u8rzExr2RJLmPBl0pX89zSxyWStggS/RaoRmOowwbinS1+36w==","shasum":"14dc3a472fa3678dbaa934365cd2b48277bc9a4d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.a93ae333.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUFCRA9TVsSAnZWagAAYAoP/RLO0SSMh7xdcd5pZlGn\nQ5xjdZMiXOonBK5a1KCZUuTV+l09amsodk5DhrXtXfL8QYQj0qgGkkXQY5Zi\nY+qTYZbmumi0s0IeF08vnWePgFMdOlWz+fnv2zwcvCIf4EOA4yQxfJnNhMUe\nEHh9TnbNbRVN/4c8JCpq7aCEMw+MWtrNnUV09kLYOUp7umu/iDcwBorR/lg7\nvG9RgQh/b4Kd+8LImENL6iExTJhJCHAFvuq1T5oSIhwTN+R6bBHsF0hpupaY\nVHk3PR76JsddB/tLzyhCuXk3UP9D5b+Gweph3axXKe1NGNiiWbIw+fUn/Kla\np+c73FrQrKuHO2GYK770RspTyekwuGLOSWtzgQx2kytrgkYmzL9v6kuKsZsU\npDXHqPu8jug5hdb15t/uYfUBh/SNixnYKfb7AoODS07nceV+PjO6YdjXV8kL\n9/Vmfz6uY2/7ooPq4IkDnhzLUx/0FZ/CH5KbPN+hv2ahwLQnc+cfNHkl2KTS\nrRziqdsHeqZhbnyiLrnzPkq7dC0nmDAztq6imcn5LECcNWtFCI2/xcuzaYwM\nVwbY9Izq5NB45FYEJLCyD5mRF5Lln4TCTO1PGswS7JfqdOkDGdbn8HB0Twrd\n0pP4IEDEB/Hyh2ssW66WbJ47nAa5ubxdQdzPffZ2Q70r/QE4i5jZS8ufI/zc\n19Lh\r\n=QGRM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuGXax+xRp7FFqBJCNucHkh0toObm25qtgtx+1HElRFwIhAMaFEoJ2gIIGAHf+EC4jFHqQoVg83h9wik6qVyMaNP79"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.a93ae333.0_1617999106557_0.03623759646274194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.e142c144.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-ripple":"0.21.0-canary.e142c144.0","@material/radio":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oIV8vsnhZ5S69ovwsWM04AOjrCYAglLhmdNpLdLxQgt8NHCxmx6mhOJVJTuaYWJyvy0rnx529PeQPwKZ15Pknw==","shasum":"17bec9e5e927c6e12cecbb116a8e91e93d1083ee","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.e142c144.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5JCRA9TVsSAnZWagAAwBoP/RZZNg+zgdTQI+dWwYC4\nwixuBpWhrwphMTBhP716pdryAGWOfzhPKJZKikvy8ufXDxzeDVnu/69vOgKM\n99pRsSLWfUwuPXpNk393cSWCfvc7Hgvn1GpKj8zY3g1ofVf8f091BEaxa7/q\nM0eGjnrTNbpf00PoC71NhJbXOiZEgoZsRU+qDI08K1KzVnsF6BE66lh/99vr\nBFMyPiJeRoFjXGe4uUcfsBJvp7Z81DqqQSQ/hPx4rYEW3pW+IEscLwisVvkt\nDkx6aEC1h8MjAD0pjgDU89kN3c5McV1w0e95Ed64YkVxIha/M1FOSNYuWLGP\nlf8EIDOSnjPIRRR+S0sAotGBVhfHkO6m+dryykzby9EqciaidGZqzcrEXH+c\nJaZ0stkwmWHIBiY/ZI9Bp69FdlO9zVrBqlm45ioqr9wwtUh+gzlQDmfLFzhw\nvucMU9M0ha0tFIM6oWp6inkX2LNZU/0qxrZP47gpiRg4+hLt2aH1DlJozPi2\nKGC7w1ZxzBD+kVucJgc7vSR3xqWlzuzKrkK4mNeQ5IsEjHtyHR8DHeBqlLGz\nDIszu8PtA+m/w9MkJYmdY1eNzwCf5B/HdcXn1OnuQ+ankpSwGI5i60fhutjO\nxLLVXvssfpDh0ypwoQrvKZdNO6rMXPz9kXPcXp/Ul+HvrmGn161UQO1DGNIZ\nqa2e\r\n=CI6D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzR3Oy0J2dk1O+bjdKycuH9WFP7k9eLqntu4jnJB9/ZwIgGCfF94JqiiDNZxN0exLawz7P5nAML3ISv6QdtXqlWLo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.e142c144.0_1618239048545_0.9727212864598196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.382d7eb0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-ripple":"0.21.0-canary.382d7eb0.0","@material/radio":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.b2fa996a1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/KpKyzhy4YDv1ORShdG9fmIu8RRspPSKaAIClV8P1jm6HABesSflctNnycFaNqUOfPthChv9gPh8p6yLXT4/og==","shasum":"e195008325eecbbba9d6fe5c8be81d30125d1c95","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.382d7eb0.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQ1CRA9TVsSAnZWagAAPtkP/3SkKN8kpIHKyxj1XqOI\nL+3OUSlhL67TlZ7EJIDNYpYaAe2axXQsBw7gXX8Ejor6OGb7MHM7dl6aADWe\nGzHJFu1NvHK87ldv4bTWj4X2HICphifZqsexAnpBfGtRli6w4ivd9Th0X7lk\nLZ858DLChgLO5GWGvR50AFKji7mF0WB4zIrq2EBh55+E0h5NBXI6qpuehW8o\nGz9hmAEZu/QCoSNCCLk3xQ0HID2DEiRpEI0IYsVbPKBaHI34m2R70OXkXuuz\nXiHb4P8Siib233d0F8jsANjkDA8gz+TJ5pICk7i69Ds8lO3h56ZfMFCet9yY\nH9U15stsX47IIDX/aEL0GGRGbckP2Zv2eHYweJPN6fPy55uLF53NihOura+a\nNEsSBr1TMzTG0AltJ9GojDOJ6IkiebUQXUTEYtpFfgjto8RWahb50GeS7Iox\nHXyvfHHUOACUCr09Yxg2wMZonixJJAJaR2/HcMLoF2p/2KbAT6H0tFcDHX9S\nkUHqbFNKssIvmuekRDe+i16J5dHpLurPU20ScKfcHl9P5/8UoKYZlG2r5+3X\ngAYE+NRbKC2BLVtzmhwREKEyw37zFZ+u90eFlbGim0Tc4D+tq/xRLdMFb5d1\nhswgj5+wjeKpM6KP57kUPccOSQqQkP1/cSXnj4LTOwYa13s6D35m3G5HlQzt\nLP5b\r\n=JHYI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFGwdTyyv5mmGGLmQVNfsuysyc6oCF32InjsXJi9GXKmAiAYN7u0y/K2vpToPtBHRIPB58Rm+9NN3Ykccqxe3H3FMQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.382d7eb0.0_1618265140820_0.7828036315573603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.b16c7885.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-ripple":"0.21.0-canary.b16c7885.0","@material/radio":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.352b295c1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YoJ5aeAW/10bfw9eJRNRbJSsOEAR52eymrGQMB13qj+4GzroNrGRhgJ85THRwhYcjhPBTPZ4lVGwYqhCEkKbUA==","shasum":"218f786e2fcdd4f10753bb6d8af0ae572e188d98","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.b16c7885.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwaCRA9TVsSAnZWagAA5pgQAIuJ9OxeHcXRrq9PdEZ1\n4hHZ8KhBRla/ledyFyOYtGlqrpZeoGHHA1OzzoD8aHpukYrflDPVUEcu7qRD\nhkUiMhYVizLCbZwENPnBaJgL9qp183iyXNM/K0jfT12JLjMh6VrN64HwqpOr\nCytYftpF60bLGdH4ObX/9NfDfyrg6clBGHHtcBaxD/HOoGVnPO74BEvL3rn9\nd7JQ7q74/bgxha2D95ny34K9mnnwYf0emZJ9lP6g2nsQ1D4L0Xm0oSiws9d2\nNccUBcQxR/RDtdjla1/9BKOGFTB+RSnu3/Gwrm7uSlAUR6u7lLsGAWfK/BC7\nYdYBbCJgmiizRoBHClURIyfy4I7HS1n5QU15nqKsz2zST0GDo8e0zbDbw5Hr\nhOYlkChlTW13vkTkaKFZdKnVfwvUSkjEZRNQEUXJZNKcgnmR6VdO78q/ieZC\nYQ+zPRZ5NvZo/SGqWzDRjHIs0p2WPtARc6IjIX+k9ZhFeSvlvzsb3EJKK+Jm\nZ3Zy2o9lQc4cvQ7tl1hy17mMvop2z0MGUoyxT2yTyf/LJZWtIiFlcO+qF3d3\na4+tf/FgIAECW5KM9dHi8e6/unhOS/d63caR1woGNVm3iN92kG0IoZ3Qxzmx\nYl7TOo20LetUMayXvuelVgSeboYC7shRCKx6kj7LOIGOu97+KrcOHuqxjV62\noR+k\r\n=10Y+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUZidu2Tv0SKLJ7bpuulJ7Bs/eCUXYlzIhge+N5eSJfwIgWHfL32oljKcaXggfN4Ade/f2gvgfvt6j5yyWzfDJlWM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.b16c7885.0_1618267161918_0.39226212061013777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.0e92782b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-ripple":"0.21.0-canary.0e92782b.0","@material/radio":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.352b295c1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-14GZyr4Qqdkr38ibPeCKOrzBMgrPOkIi2jttjeb0xhgQ/YlyFj35QdnHBudJJ8iJNw9gcu8AnDeXzISQQvSuSQ==","shasum":"fc6a45753868240788a8f6dc5f7262ce72a25e1f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.0e92782b.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda28CRA9TVsSAnZWagAACNEP/0UFAXn5sbOoMvmi11cY\nhJJcW5dLJZ2IZVgdyoCVkeLVYKvrLKF8vL1120ZnAbCzLBkUuNV74pw1tvt5\nRYepwcuSSbnMTCJHTTS3koQaT8yEkzA/VzK07YyGvKcbLYlhfg7UVAxpUxua\npfROh71Ita7NA1P1N1TfhsS8uiCP9/NxTl0OfPzIqjt1bn6z8C4VTA69Ze//\nsRkiJY+Jz3blj68xQg0qkGsyZT2PlIc110chQfRQEjcZrdaunZyDNoVTuFlf\n2kvw7/mpiMgsxzdON8KEfhLzCH+s1V2iOUvcHlS4NYcxdnm3njol3Lacx+hR\n1iT/ds+Sf9F3RUD2gkJ/vKy1joMK1bFa0I3AyNGFoChKo42m40/V3CB7ZcyD\niXjBcm6q9EtHxMVXLWQghEcg52kOybdqmPu28CO9kjwj/UvXZIBrFVT+rvp8\nL1N9l2kHYJYQhQcGHFIgCXIz13ha0/kcbTFvY+ZW/4yS9JrhCPWM0aR5Tyys\nFrxTYnDOx7MBoLnvPb2QzIT7K/Bzi+jJumfBPtQ5yJP6/aMvSM4DW9epuyGh\nE+3Hi61XD+a8LpTj3+bCWsFImkJA7gXjNgyG5sFjJaOZoL2RAPfayWFzMRTu\nHHwSEwNVCQWEqBHcj767p55cMwPeQW2gf8a2cgeJUPiKKMeZfUJHgIeTroDf\nVY/O\r\n=EmtM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHApKnvT8mH8Bhjkptsk0Hygf0R3lr11P6swaVyy/+WjAiA/KrwKrZylP7Tn5220sO0kZ6wXQCHerM7TFg6u1m0tlQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.0e92782b.0_1618324924106_0.031335295397582064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.70b3a072.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-ripple":"0.21.0-canary.70b3a072.0","@material/radio":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.352b295c1.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Qy72fUdtIUZ+ClfQV8ZWFYYiS2yO9M8ZY3SYa4irlFHXgXzWd1pXA3GRjEeDJF8mSRFQKsQIa6ghr/DvFqXZiA==","shasum":"97693206b13dee119293a72c8c57d0b32c5c56ee","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.70b3a072.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wVCRA9TVsSAnZWagAAkl0P/0TAnDTtio46qDddHpF2\nELAOq7iDOPWrA6Cd4odY4CG2jdDPC++mIAIbk+IX05ucNflS/xcm/gIWMwSe\n/FUzgxW2Q1+xpcLLr1s70PWc/j53FRjIfHTNm5pUisjtsHpMFl5kgx7eq+yH\nnfE9Zx2janfQXVcWSjuWW/mF6J6cQ76hboGpKK1k/+rD7o4a054OUPIq/dTg\nIbaRRElfCGzyICGk4hyheZ7FnFnJD1Dj6MYMR2J/N8oCmB/loGtKXlQK1MqM\nwkCn41o2zNNhpm2ZEI7d2nRzRtGBaE/QspVg0TPKIrKagpuSL5Ey5lqpdgTV\nJMsfNntYaAgbcdfUKySErk9jKQUiP5xvfI4P/2S6TFZz6RMmgl7aO64o8CCw\nSy8wGyqz6S+Pk0l1P1oit8VqFNwg7rzCt3whXILfkae0DOODDA9RdK8Bbzj1\n1hRwDvM7JF8XlNWISSFxurTThHttZMcqPq25nMZozsfw5RWFi3UsRiPhz4T0\nViXw87wSng4rw9pFAohJlL7xS+pji1dsb01Y2sGkz4qCu23ijopptixAX/XN\nx/6pltmkRKLgJIVTjYnm0sAk9Cpdmcsb92LvRdWcstYs3hHbBTU71d93SuST\naggXdLiQURMO3bNx1milVDjnte9b1Ma7HJ1lXma9LV8aiIsKEhegLHh/egTw\neFHv\r\n=JF8y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ9efQJaTU32dlIh6bm7pZDnCUueVrcwa8yIqBPs885wIgKPRycDQW+INtoA8F1zxa7ZPWnDxHTI1/i42yko8Elok="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.70b3a072.0_1618439188626_0.4887797259527653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.ff79b092.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-ripple":"0.21.0-canary.ff79b092.0","@material/radio":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.3793a3143.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TgXefHhNKOGBOcoKUvFPa8CWBEwtHIptjCZ61/SYIQxotNBv4TeGUJHdXAUhaX57S6cYPxy4hnFqfHFdeNqW7Q==","shasum":"f717e922f1466deef159eb6573351234eea625f2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.ff79b092.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI04CRA9TVsSAnZWagAAIUIP/0JtLVfm31KIAxchPsQK\newHmsKg8YSsnXv7w+moYYn1OPYFSPSEcy5nk8lPXxpZtZSprTpnXl5KXna5x\nI3T1ddjfXJ7mNsDCYLE1OirJD8aiQVGvSsG8Y4hlHHoYr1vuK8vLnuXx7i6O\n+5rrt8yyUSQO07jida0b+OLF34OlXCr1LIMS66Tc6a/cNsd58lhbCxetw/RZ\nxAAWLnf5P2XPdwukgCSVqTCjIFgq3CAqeysvRD+1n1FiziCJuW+X3Whr/ctg\ngvhN55vhD0Vvp64lsffhRoM4vaGjrRdJPx03W8tVXQREZ/HncdWJerZvfrpC\n16yx+MgT3Lrp1Oxn2+yWK4AUah5CkgD05ceHoNNnWqsV2rJjop2p6Lp6Z8nU\nMnlDTh2sQ0S/sn4o4bN/j1k8x6zhNpwWs6Kyhvx0rulwEaBeX+zLifyBCg9N\neCHxgPGXnuP09v47LmL4IS0/BI7G/EhjEEY+TFFBeYYdIX+l7z+kC6Ikmz1i\niKZlm0Jy4yqqvVIzwyjIAM2AX2AIXVJML2F8AIOdQwnGkrscn5IZ2x8geT4+\nsFKnp2LcTk/TKkhw8LazJSTXnkMUVptoAMl5KVbi5wzR5AZxd61FiIMpDiA8\n5HWgpcp/E3/wH2Kiw7gBoZt6PC/8y4KBjlLxa3gMfQfkiNL745OIpT84WPVS\npL29\r\n=z48b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEIkO/ZaEL7vAcDUXqOnBiHvsAPdvhVEOSF/4EuQy9S6AiEAgebf5P0WnH4FDPOI+IfxXByzDPj6p9GVxSj2s0snfK4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.ff79b092.0_1618513208073_0.9881940994002538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-ripple":"0.21.0-canary.f35b2fd7.0","@material/radio":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=11.0.0-canary.3793a3143.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ALkn7tT4mgoftALLG627Sr0if6pX+kzrv10V9x1uemL5Um7TeOBYHh/bp9te9p49CJHpOLwKIW+Ser/+2snzfw==","shasum":"e755bb50202564020e5011ce206911017b2c4830","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.f35b2fd7.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+pCRA9TVsSAnZWagAAN3oP/0VVFNjD1koqDbok/vuf\nUPfQB5XXfn6sYdyqQbiX0e6uDyR5u/BZLPwmKDjsyp87N8ja/bt4qw1M5sA3\nbusva+5Mft64O6YhdsBGQDFXA3r06gS0vAREEMJQsfFpUdgn6P0xzOLxs7hd\nEbRWcwBNW7kSAVmB4R30Hn3i4sZi2KhBmzGgYm1n0u4hq5SYBk5ZMMzYGljh\nVoMGsDKK/l8UdzhD2UEiaG4p5fTtcBVB/HOobdBPHnx1UC/exqdTfKyfwk8l\n9eanGCA4lLI1fY5mp2vvR+4IC/4Tbh2le3mmVMS7ikI6CIDPVKFMxwgCbvya\nB6k2dLsD8RqpxS7o10ZdVkO3Xlx+hIA7hFwipYm2QvtyBmOHAsTMG8YdhK2G\n1t/NnI5O6YyG9HRZqxqvkHxWleWHJayGNEPDeBpSeJ4XeSDq5B+7xYrA0ul+\nwRtHg0mczBr4THEC+Jajug1/P0/0fN3T7wawPq28pRw1DeTpHFxEuLrJTK2q\nASrbSTxLfIqTNHZb0WA8bm7nnzBzgGuVz3H4S9qGYYFUQDEaejws2PVCsZ0l\n+9oi3V4idW19E4D1/ZTV+Ttzgv8XNPrIt9zueacUKipqr+8G0iPsYFUy46u2\nH055J5MJOZ8hAjACZTt2JXTzVH2lIkuK/bCLzleMOLl9aWY3BHp4+H54bMGu\nrchR\r\n=k6ND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ2msX+PWKWXoF+0xVmrg/To+f20t7/buOaqWC/BImKQIgYcRyVPg2XWiPpmlRHgJChPS6gfpypNmaJ2b8nxEsyP4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.f35b2fd7.0_1618513833206_0.0769383164531603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.11977cac.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-ripple":"0.21.0-canary.11977cac.0","@material/radio":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f342c3f4.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ud/X7a7jzIxbAFdoEDxmUhsz20WooJ3C+Gw1v9Znt2Gno/8EzbiocFD99A26OYpkbPsST0LazFJmPuXGKghpgg==","shasum":"60aefe36f3b2612c3fe82f2431478f92decff4a8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.11977cac.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEmCRA9TVsSAnZWagAA88wP/3QPrBc6b1N7pBeCGj+V\nkgKJxzbX3WUNGI/rnO6J3wtqUyi2afRlDlFv8XLRmIuXrdW+/b/iDd/DGknn\nBdq1sWrVFGnZQF73g0SN/KKCDTYxxvL0hnpb43QgkqIqq+JBERir6uaG/FZM\nGsGAxv7MnDX+hO8WR6vZZtIChi6IGXIAzUvgGk+cX2EvR+oiAmqCrjAv+FYL\n3h3UwKjvbwnzdnEZpEKjmHqqdqDqQEd5QB78gV620Fui+t/ydHTTJh1JcNBV\nb8Urgyb8VDgPc3eleY+4K9oB5bOinY42gk1VpQCdZ3hp19R3YUlV83uvvgi2\n+iWynECkJhUiNXuVTF1jKzqvh2gwraDRgmMus+fEAB01lWLgtyXX2ruvS3nJ\nndqVNhOQQSyYPz+nVNwecaEzlYdJ9q5dolpxg0h/a4nR/eN36oFDucr8oSbs\nGOHwjqxQdd95Jp1cEdRiOoFT9sqleR1aeYAw3Bk2eo9YcrWWVxBwHGMKqs4r\n24OSmyQzTiivi1A9LHw89LdRU2HMJCGlHHwx0d9+Pj21eKzyvK55rA5lzeAh\nUJwOwpc1Utqx+rYMRNjPTeB8h4AUjdgyM8mkjfZwfKmtDDTcYTS7VghJRAFa\nZ/p+DBMgOxwXnej4sdFXswqXC/NGR0XauFOCEHeCxvOINBL6SN3G1A/yUs4h\ntU+O\r\n=FwCT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGb8X8qTf4ZCWknmtNdRkouCucSsH45hs9oN4S9X2sIrAiEAypK7bo0/CmbYe3JPe/hSxsNul0H4/MsJtsdIR7+iHZs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.11977cac.0_1618534694071_0.039842039849073085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.018ff45e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-ripple":"0.21.0-canary.018ff45e.0","@material/radio":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.cad489689.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dYreSIwLXZnIjVWtO71g2H2m1WpAXGVDnicCl75mrbddcUFkqZAF9jFuBvzjTA1RNGduVxGDXSnwPekfyAUqmQ==","shasum":"2b5052ab7a7122020d9b8b87f1aac16c6a749e8b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.018ff45e.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3gCRA9TVsSAnZWagAAbxwP/3iNSsK2wUBERtb/ZVHn\no7Sfxs2AUzFZM0NL67BA/ysP71ajEeXpoqQpRlCOmdqHyIdN3bLJBEMRu/7O\nxJ2J9jqmfEFRaMzbp3hZo4lIS+UyODbMWTdl8yDleclshH13LH6cj7AyM0a1\nbcUxd9bk7toetPeGM2aL0zFbaBQavzU/rw6jtdLxtpRSsGHuQ8L+ezO1I8pI\nU/qoiuso5B63A80udsk86QhNfVzRjOaeqIjBsEV1D+TF9xVCZebT6OIqly5i\nMbmQaZr5Zl9LIG+ZyUj3CUCb+77SNrr7PeyWqR0YHMmyLYxpwZlTWi99eDIw\n0bXBEGpM/TaeP3FEoytTS/4Y/Yc/nUdie4TSjEd9JPT/xI2mA39baZ23fwtX\njK2EUyI14qSxMxhuDX8xBFjuGcg7807vWM1duNeFPEoKtq/BlgFKvJEWGE09\nYD+gBDQAPxPqXqdX7iZzpoWAcoAV/aRrkuZUKFBHgs4QjVE2pRjXHB740iaX\nMoR3q1Ff/lVmgbXSphZNovVcthGLqmEMJg/SngWBYDPKvALt6LJ8+cAHU5gb\n5Bg3+B9BTQHPW/4PQsKT/bKa/AL13w7vW7XC56nJsGR/lqHLSS+Ts2/LoIJi\neVZns9EyFVFloO2FR4gHvUmmjukCzT5zTD+0o/jaqmHIWHzD0ex85G8dPBfb\n+dcg\r\n=MqdB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCUdW5t58GjxTMNsJSqUfzN7VL9XYSNExuEocDCt5DxwIhAPGlGehfrBDTA0rR11t2Cm32PGzVsBikN3vTCKa/8PH/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.018ff45e.0_1619131871830_0.41786465547283913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-ripple":"0.21.0-canary.c99d1fa5.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aAGGCH+PwH+k2LZszH1/jqugL9Ziy700WU9iYKAmIHT8JCLkFm6fB5XBc72I5XENqGcMD3T1EMnvula2hATjeA==","shasum":"8d8ad174a1d8fd8c309c2a36615efe28cf494362","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.c99d1fa5.0.tgz","fileCount":18,"unpackedSize":100849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxinCRA9TVsSAnZWagAA6scP/28bHUfGp6XBzmozdNcO\nOMerwPrxbXD9zPIcHBkzuMJfMBNQbHjUrjbAI7XwtNYWV6uLZ4tIAzpZCzId\n0uLzUPRxkgHjyKk7Q6br9GPZszXoaUeQIRIEBvCb4SSUunzdGW1tPPp8qQ/N\nfo13q+UF0ysg/AxC4DMVBebnsuPTbOuad3l/EbYFSfIFODYbf04fq/GgBMmZ\nIskqaKC7E5nVfRhrJ5MOc/UAr7d53xpNqaVdHhaagYOT7OghBTk0cc6zRxa+\n0JA3WExh76AD7fBiYePL06dMFkV2WhPd2tXe2sed3wR0fh2Ew4ijC+EOoh7y\nrCjbxaikBQ6qTos76jTut7iDnCKQx4twYY8nUedo1JXcuNAsrV60Un5VVaMz\nH4iHvrp8yl01+A81PUfxnu9pyjcQig27QCgHQhiP41E2bOxt6noBVpDFmlyk\nGxkXfK0q8q9dbNFrOwFa33Pkxi2DUorRonk6qaTDyY0Yp4bJO6xp24e3aQly\nctizyKg0jB2zTfMZ23luOR7B0/lqIVcGodQwhWdiPewEqaEdHHPaJGBqWkvL\nxE/YBi6x1f7/0zW24AUC5iVNWRnheSrvxQmPeYEuS5njY7N2bTYvYfSAnx1i\n03EhbAXKZLSpLmkhelOaF62oMAkNtXOdtXtFX2LZWeNJgzb94LDLfvbz5PEw\n0bFq\r\n=aF/j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBa44ef1LbrWJ96uY+ZzXskRBT4bpYJVVj5SMOn37cVPAiAewmewKIBoVYbQ+c/wTVwNISIACsHz340wzlG1slFKXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.c99d1fa5.0_1619466407138_0.9957376753838956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.eea9b304.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-ripple":"0.21.0-canary.eea9b304.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jOWi7kzvAJNSQb4diWYJnXH4F0z6M7MohJpacmvnbTEfOV07S3DK8ivANbD/hQD2nu4MwTwPiCi1kR95YvXDyA==","shasum":"0c7b7c83feefcd17fcb679c7350640efaaa5895d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.eea9b304.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXgCRA9TVsSAnZWagAAVYcP/2/vCK2Jkx4d78jGU0Jn\npr85RAoNpkkWk0X6HaEkBZVCjZtFu6sVyK3XUtl9fGhhaSPhgZqhtEA/N915\niU6tjLs8cdTwsB/XJ2hsppnvYkYwRQYdUw++I+cdA2f1yQtSzicTAnm5HZci\ntKt67y6u9mgtQr4gUcmFyTJsYbpvWr0b5Jwkw54vzrR2n90PZAL8BhnJH1T7\nBnfLnUvAl/CEib0Kwr2aAe5YywRnL0b7Ys8lhMasuGuM1gyj3MapO1SeCVmo\nx3Tljp3MJ/LpMuIZBi8VaStFS2o0DAJJhQlxlFJHqat1SQ8ccUO6Jn9PRB6A\nkX0zbMnmcrCoVvCT6al4zq77sGJMYYGuhYNKVUyEB4OKNUZBkTe8tWAvfV7g\n8TP56NH5PgHn62s0qryHFWt7uNXzzi9Wn1KNbA43Mx7BHrs2RSEBQCO44vev\nLkZ/Ddv5PKIadbDtKcYJF2OZq1gUlFa418TqIVDiOn1QQ50iMEOwBa4Te2Ie\nutvncYCQmaZ4nGh+MLd7q8H73BJt95KWCKrM3yb1BVZkGsVa4c/IIwNKci2p\nlDBt32IHcZsFJVzebO162JQLyvUyswNzPXxl2b9jD+FxtOPhipBlvX+kTUWY\ncFmh/KmfMpCjuIYzba7KH7ISUmd9ARInOABmvImTSuqNMX4XgV0emnCJgBf5\nF88A\r\n=RZ2j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqX8cB1yd7aiU9Fo2iQUTmfef4REZVwXG+g6QLj8MzZAiAnU9HXkHwrcR8AKYop2RD25yIY6YDJctQdV+28qIiMNA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.eea9b304.0_1619564000013_0.056467917137622115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-ripple":"0.21.0-canary.5dd85d0c.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DlT3jlL0NjV0yRWRNFlWmrwFbWa7XVW892OsL2LRzrlGg+OzrBlgBKMzffGtW25j9lc2Jan01t4ctK48R5BJKQ==","shasum":"b539fd0e1cd384f5ac5f8ba9e5cd83264e04b8e9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.5dd85d0c.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfDCRA9TVsSAnZWagAAupUQAJXSzC9UMEWRgVGl0e+m\nhq40o6svyUlqGOOoSddAvlmBGm9kk2afzxFEKvXMpBbkCM1G4pq9NJBFiVtJ\nLKP33HNhRSrF9ZVwycEiNQORs6t9AxEk7sfFPmtrjx25/OTWxq5n4NJ7HGpS\nKxq4UX7cQnr8DNu3HorsN7BWE9zMbO1F4L7nvCfo6uUlCvwUHll5vqpYKv59\nw/o3pQ7/RR7fmr1dfwPgmhBxTcq+3+XP558PmwNfukkFS1LcbxTAwyi4rVUR\nWB4BCEPTXzboIgpt3CjpNmtabZVy9KKgC5GXQKZeH2xHHbyyOl9zOwPIG73r\n9zklZnKBRrUpZhrJ6R4SqsNQ564KKAoVmXjz6E8m+5/sbFWcchjie/MYz3U6\nqBJOKe3fRRRdNxHw4FQVqYdFDpFhNwdHJRiuaEVazm68PRzobh31v7DxRHiz\n2eNIyJAemgjqKGBCvIeWNZ4aCBNPg1aVL0qM8qMPIh6S1z/2ExkXrd4UCiha\nemmTAXHvDyP3g7oMuMaQQuWxdMnEvuLRJoIw6XflZuGd+9iYSKuXHeWQzfld\noYBFqgjqf4lSO6qn9i1KRyQUu5D7+rtkOa4o5hmnIVnbPqDTNb292mu0pg5q\ntv2nVM1cWgOakH8nIkmkX8K0Kv5/PW6rDpEaf8lVpsxKUprktRjQVa3h8AzG\n+U2w\r\n=PdHX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt6lYbL27nqr/hPxf4x+kUl0a6+DTduUnF7qWvPNn/awIgBTwi2/yYIvOhTZF7EFPGk1aDB+mhurE57waljVI0toY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.5dd85d0c.0_1619568579409_0.5768871680359458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.cc813cff.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-ripple":"0.21.0-canary.cc813cff.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UHo7oxkP/PBEb1xQzyVf826Hs7JnSca8XRQNXtC9izic4LRg5exW+RuQ+tYmid37oO1kYvdaVuv0U9ftrH+LpA==","shasum":"4a36130da184ebf4fdd190f14d7fe9bc09af8f52","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.cc813cff.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRhCRA9TVsSAnZWagAAet0P/2KUMdr1+AQrM4WcKEE5\nu5cBu7VIcoP+Imgj5cfXkBk8nbNwqZFo537ufcle52ZWMxfUODZ46BNeDG+b\nVjNCAriMSZS1LVxB+d1nQrfi8ecKT8ei699IN02IlISMnC7T4BLFzA9Pbzxr\nz625BKz98pDDQz9HeRELaqKUHYmEw1Ybxuv9flUgn98Wvh/AHWob2CWzzwZq\nbzqGrGxAeBr/AUfE1V4KyCso3vb+/KmSzYPQCIY5jZ8UYAgn9F8n+1YROJ5E\nyX2bC7GuDCjMaHfHR72DqmaKmlgEconuSGwssFvHwvjFaTp0aecWaLs0yNoh\n7MyWDkpukNUKmDiHYxWpLk7y5qHMv9q2zRmL8de/0G3fCCKOk2KNIFA0yZ6D\naFXEDGgeWwTZp3Y9qbGsjwU8gc/Df61rvMknntG/okaanfnLfUikBMjrwSuE\nYw5uNC3Bu7NzviqoZeHS80ySBvGqVDtq8gzidVBdpHRGxJsN3ukvl2sPf0FC\n0V/EA3i0KJMXXwCWdrVrbOBKdJ5F3zog3z6XU3Faox+lQQaCYwjJI95932t/\nz0OdTIkSICHGc9eUQcDAYKPvsmAiod8Q4mKp8gpZe5n9OZDnOzigQZ5vKHo4\nt0DbawXPSBHNxUjQptKKvxIfNeUk130I6cTJwUD/aIHfMsqHVVyhIXEOYJyz\nhE0/\r\n=X84v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNMTpj+qtcG6ogvZ2JJyxp1KwAIzFlPnrFUIe5G40HmgIgUnaK+ldaYb+rrYBw8/qJ44SLIOP+LMz+NN5eWaO9Mvw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.cc813cff.0_1619817568990_0.2410004629873974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-radio","version":"0.21.0-canary.0875e898.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-ripple":"0.21.0-canary.0875e898.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+YH8YfNFOf0fWOUFUYK70AYmm5UUmAb/zGdjVVHZq2jiS81uSOiHroVBVkHiLDDaRit3WTryGaGZpoLq3IstjQ==","shasum":"26cddd7f2d99799013e28b57b2d85bfda7e76dc9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0-canary.0875e898.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZKCRA9TVsSAnZWagAAxXUP/j9vMhdeJo9opSOO1+mI\ngtFyz9Le5fUCbWb6PlaeJnXbOdNLCwExLo3NL3IHUQL5AEotz5LgVgVgU5pl\n7v85HIjUnCcICcPjLNGEc8+esVaXV0PnUIyxQO7f86Yf6cMCUig8H4GYBSZ3\nSqdymlq1FsuwuRJyCDjjm9HVY5AGcHoXVQNfC+Zha2Np9+lWvKEMZPXPxl8B\nE4VDecWgMyzAjxri93xwX7e+bQsz8sidXh+dF/d00Nhan6DiIIPt211gqQz0\na+qqjazuleVfpunL563DgEgdblumCbVr16+Gx7KV86lJ6bdfI1VXiz5hy6WX\nO0hGKT1ja84snlLflJAon5fq600OsWOk1/j46NpD2n6c6Cjfz1OpSxl8ul3D\nd4nDJlYTC8cPB6AfwNlv8fwGMzd/SnYVmoRz68Jk9fiODFVkkzBBUB+Fmish\n/AaOQCJGLd/07+3mmuBiLITCFLLGcJ9LCEml9Id12bYulaB5dLwJa2cC+2r1\n5N6bK8li36n4m7EK0BuvPBqewqMVvzKl7OhZhyTLjhLk9q9bEvWvOZ/VNv5b\nB0DCmK6KR4c/v8+rv8F/fYygPhrm14YmUumGQ4PzDMzO3ssmnqsFalJbVqjg\nluvppw24xvqdtaEccGW3vO18Ct/KpK0vwfGQc2HJIoxduwLY+Oycm5mZK8sE\nQfDm\r\n=T2rY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLdNXzeU5nwZTLL9LWGHpvZBaAV8/fk/3wbJCJwkVEYAiEApy9SDN7Ek+EFH2JTZdTng8Hm/8AIZfMVzbFc/SL2UR4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.21.0-canary.0875e898.0_1619818058225_0.4523351985149371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-radio","version":"0.21.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/mwc-ripple":"^0.21.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"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-radio@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-/2QIuEC+h2wvlIvMiLw5fjrOVu/uwyIDwl8NIFqYayWN9nvxIgRlPwEKTdF77k/b2bjwk/yDV4azQO1z7lH38g==","shasum":"1a5daa3a8dea3b81c8b833bfa5151d49c012e388","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.21.0.tgz","fileCount":18,"unpackedSize":100989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmQCRA9TVsSAnZWagAA/f0P+wQpQL/Dn4KVjm/9Z0Oq\nVZXnRoxAw/shZsTBwuhTZPhR7CbInXPy9VSbrpRZmpghUwInFuq7MrFO2NDa\n+RZskysSipUNzpYsFp2Uu3zDs8dtKHGd83pBA4NHNqnr5zjNDXqSO1Q622Bo\nrSpWGdhLgLPoUjCqOmTc7qsYlxOfTL77vvUwciUtxTAh3ydqo2oSRNJVYqH/\n+mAjTc0Ava3qaQtP0Wujp/gMhgCE7IyEMANmS6wonIUIJeb3L/+maeKktnVn\ntQ7b2svevu8VbZJz6GCqqvSp/9PATbZZSWzKN3SpqSp3/l8ojliKBWD+ZbV0\nDRLNucl0Ph2BaqmWKZnUhIOIFLgfHZ0qhVKueoeNJ24qUdlsVHfyjXjgcJuB\nKaHnPxK4c7mxKR55FopzYdk6/OwyoYfXiVeI5K6TWpWxBnhbBadIdCAoeqzP\nhWcFK89wYC5QASK1A+nWijPHz25PdyTbWqPLMhfc8K/gYGGVfxZkA2g3HIwG\n6dGC01Wx+FUoL4r1DJrVudJiZPSlsBPfg0Ap0je44UzwQtwrVQObjPo3GfP8\nuwC8CvkMpSad5/huLfIrOoGKWOYaD1eLyoHSsgiZbH80YN6ZHdWE5RCbw3ov\nv2VmZ0xnS4WUvDYNAXgvG1DH/nGxUeyK2e7p9RmqVmO4Ob2fhFmvFKZuytaT\nOy5J\r\n=DJlH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExW7SqundoUo0StX8t6oFY62WQCFiuITG59WtbvjYy2AiBrZbt7IdNKbsLqqPQ+CHNcFkR/CV1A3K4F4vcsFktShw=="}]},"_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-radio_0.21.0_1619827087766_0.43121769214486627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-ripple":"0.22.0-canary.8f1e7e1b.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rWkfybqpBAWfuHCvPunAb/nfRQvXE1E+e2yfdTy6j3TtYAyI2X8ugyaTiy5veWxMSC0SeDNyZxxTH4nlQdjPyQ==","shasum":"818f5a4a343a6db60ead8941e5af0e3746059140","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtHCRA9TVsSAnZWagAAkRUP/1sqALBtWnw9NfTG37Yp\n0/uNRJd0leQOVCZ5I1Ywpl6nHb/oi2txDlqvR3GOtCuN1IotvVT+YKJNVGbo\nL3kio+VtBx2kAJuADP9P+BF3xm35+niLbJ7DTbMtzK/K5dcDu94uM8pmlbgM\nIa6bN6nC1MLoRxpsN42gePIGMJxDBRUaRclF+EjXzpBw/tEN2Pjdv4LKFa57\nD9SinOB1qgzNsyKX7JFXC4RkvZCAPfZmhR/m4+vzZ6p9kEXLcdQ30pGPXpF1\nlnc3sHcDTm8N0Hj0tbgQQtahhK3ZuTNK7ouXoUs3Eeat8kNbvzRFn71HXPQH\njR/xzIKtTFLU9wkpBSX3sGXpdfAebz3eVIgTjR9OoY9x4Fwo4Z7wNDVcjIiN\naUHlOMrdYW+oDsDuWiiPPG6nCGDktXQjUwGLecNmls5JuMWqJnp5OJjuSUOz\nmdPhvl1ppxEl/Uwht1uIZcmnDEFEBqVztZDLMD1hNihet63OhUP5Sbms2G6d\nJU+uGRuUHXBl9O9CGeX3gpOAYUB28N8xFYC3dn8oifpcFoYlgmA21pXQTU6S\ncLHN7R+ExIet/MJJBndDu/6e/iR8/pTQhCvEZKbAZCLDzlfzXb6b88GAB93A\n14M2CjvAwX9u6m6lqcFNlJ5/0NxuP1WJArIFLEFUXKEL4hhG6/uc593X/FPH\nra7N\r\n=Jooc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdE27mFsnL7OaQOu8htOg2yWf7i/5H4DmZUkR6diAtJgIgbTOUcVb1v7vzlDRZFoSawRJkWjdiZRsenUWcWlJbH4E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.8f1e7e1b.0_1619827526704_0.3619113835686327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.deb0e792.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-ripple":"0.22.0-canary.deb0e792.0","@material/radio":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.197f64fa2.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lFgfu49UuA1ZLXlORf1dFrjiyijiJ1mfhNuN+8CngOe33WwgqrPDuv9joIw2NHCDy1yXe4I6tcGpLklonmSIlA==","shasum":"dacc04ca9fd1be238e955a29329b1ef735291f67","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.deb0e792.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxfCRA9TVsSAnZWagAAFAcP/3b5A25rhjPJUrKdBa1+\niGsArUXbUdScrNAaIlhhLOT6jBbzWugF1U0+j3scwPoFtmUK4xNGWwvKqCTR\nRSGwyFkWP9QHLFVtPuth7pXUtFIxf2mIBotEYV1GqTJcZxU6/jK+aeqblsWJ\najSvDdthDqhJC8abO1aUXZGRZja2IjsYBvo4s1f10LqhgS7C9i1zb59EpSyf\nUl4CKFjOv+ne8WMtx8WtkJTYHhR3TW8rdkXQTeN7VxnsKjzi38+KKvPclKo5\n7mdQT3SpqcdodRrWvetEbkfvL1278VXKb5/ck6EuoNnPg+EJ8KAO6vwqZ4L3\n2EzPQNoaccX2bF5wIG9cEtA8jrMQDR2i0h6V7OGI/A8hp1rnPvIEjlhtlhgp\nPqLb7s9R8GzhhG0SRNklF8El9HNF+MYJIxMj92MQIkmfb1huyDgNUwsR/nzw\ncHZVhHYI87SoEn8m5mKBZTGziETRn99xQWX4+C+vqmxExB35P1DLbND2U+4a\nnnriTmuJmBBhYJZdzNYg/mjdCNZoWeOSNmyMGZu5062AD3wT4qD4IZjxZmhf\nLH4G9dbaOqDK+0FLa4CzwhCUDqeXkowXGaob+jofMuxIu6/f6CKnM0iJ/k7V\nq1ePRe22qOx1kd1ezfuIFP4099liki7QC+Wz2TTAMXijF3CwNSRg6JC46ANH\n29/3\r\n=BSvW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWyPjhHYdsGAyGWnIhBYnCNU5BsnGxlc+wFdak9lL78QIgH44QE9jatxi/P+kStE382CKpxY1GVNt5xNiHfij0ILI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.deb0e792.0_1620077663562_0.9727806023133714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.a3ff615f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-ripple":"0.22.0-canary.a3ff615f.0","@material/radio":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474836ad0.0","lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p2IFuCeAHm+h8BOI9c+TSgqCu2vCFkuAUu+jrXlnf8uB06m/dBCqfR1t4IXvwtLzsH3xG/loJw7AUrOWTN5nRg==","shasum":"f1fbf2e72804dfb6173ccdf734f82e28a7be3ef0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.a3ff615f.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpLCRA9TVsSAnZWagAAHfcP/13MaFbZWI7ZuLkiRBpy\nthfKptIkLbh20FMwAj6IGutu3nw4ZeLBNUJ/nuB7EaSWYCAk823UqC7Gme4C\nwV8wWHxQVriXIvh4Kduvb3E1lRyrFjTkDvcL+uxIBXgQnMFSDRAadTegrdtf\nx2Dl4Qb+GsA5NOlZ2+D0Ghog650tkyXRDEP5oW7A/TgXBGniqvCUnX8o9o9e\nKz+PburJyN4UNWEgG7OyDB9pWf9gceAtVQ8qfu68cdJ1L0n/2U3NmbHcsj7B\nl/p2ZCcOPo+z33ciqX39SiIIEbAWSmgvFwnizRQEL0kxkoymmhBoF/c74c9I\n9M7MDtIXDMIyovbAqlVo/OmMQ6fGYw0Ky2qojL0CSSBm9mSg9O/tYj5vjY0E\nLQl2/Ssdvx68UM9IHjB4YmEGSoL/byZBWuj62w6tNZEe9U1QP2n2W0j+eV50\norWD1mpM4FyKxa6oLO4xKj3aNQVjXHBwTgGf3lzobI5iqlTP5LWE1DwCnvUS\ncj2lrM07bPgz+3mtwcdl73Yzw4b/FD9a+2A0ENjkedXy7RO4x6FPas4nhoCV\nxsxxRRkdAZpcczq4Zb8O0+xuimUI/G1N+JOGDBZLmsvd2eBFkonqSK9Zy7UT\nyNZHjqwJrhuTISazNgbHAhP8kQPfDAEPF7E1TbC51yU5IsOWh5e2yYXGgdTD\nuNKC\r\n=cilx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlpDYTSBWCXqe/7dlXt7gy3O/KpYx+XSgeKCnfyHrvdAIgI4d1IkyuUgULBc9E4QtSp5QjCZjBnRNO+ega79wRYxo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.a3ff615f.0_1620081227379_0.31331262550027605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.948ccfb5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-ripple":"0.22.0-canary.948ccfb5.0","@material/radio":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474836ad0.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Co+w6cpNlQv8pkGaQD1hWF8V//1UBPTWi04PfR+jMise5U2COGBKtX7LKrGng3nfrGDkysWzeoY/iSZHjONPTQ==","shasum":"80bafdb9bb82632bb9ecdb8f66f0169e334cf41e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.948ccfb5.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEKCRA9TVsSAnZWagAA/nkQAJbEd8VdusamXW/7AJlT\nLUbcin62DjMHRBZYJrxmCXdU2jZqEixJ1DhLJjLwUUNuZZKMc7XfH7wo9nst\n09UoEi0H7t2AFTzm8MIqcrJArNNsSnfWj7txePOD+UD1uHWLoijnpmRTKOo3\n0iLuY0+f95l7cm9C124Gxc+aRtuxD/0c0SJ5uJ03YpoMXJEeI5IMzDLHjAHE\ng3G0jG6/kDGVY2JTAgEtTxAEvQhzjk2kSqtDmMygtSI90tlrmD4/PBCKjWUe\nSCYar/t1DjIcvulT3sx4mbHBqMcp0rxyTPzlNzztlUQUNrlMuejMcd/dphgP\nhxO5xLrsbmcHFogrjL9Vf6aiIMHL3dV8V6jDjJV2iEX3fekh1s54aLSxdjai\naMgDOYlL5f7fUoLZopvgja3J/kKe29crtfi2KL8xV8k7jXcmaHVMuN8nK2Ks\nq8HCKDBECkmRDtlsR/Fwq8pr9T6bcEA2DWmg0fy++pZ5IFSqJltmhFPU5BZM\nEzzgDafCrtX4/u7eTXUo1xBhpFx/8ws+nCMzbneepfjr3/A+vKhEaQkqAN0L\n7dYKYVWUP+bkc/+5y0rj8QaQvGVfAAE5e8snI5aTBvAcR4Kq378q8DhCDXFk\nVB6qoLd7JD1kB2axm4vhB262aTi2HJ0kjJpmiXWaUdnAZrUFoXS8gQFZlvpT\nYRAv\r\n=Ksn0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA0Vqvwbl3kCtfnJMPoY/ZbGB/jp6aRR63Dd0RiCOk6AIgYVn/RNczkFwhZ9iz/SLzBXE28JJ72v/iQtqe2NeLMLE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.948ccfb5.0_1620087049578_0.9865425325257775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.9f8337d7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-ripple":"0.22.0-canary.9f8337d7.0","@material/radio":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.be999eb08.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CVTDpSURV2qajFQfYYcqN7qFkhbqKcs/HCqxiRXDZ8tc0PFBbicpTWG8WFOG+bulshVCU5wk7aBUCHq1ONWKxA==","shasum":"5a9553a86630d23a98cab851b85d7bb6156d600f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.9f8337d7.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRTCRA9TVsSAnZWagAARs0P/RMDGeBAmzHZAx3qglrg\n6IERDvg0LyBDFvGPkOuDm4yXPQWu1lcyFkKQyPQHbNEXMTxUZ04hY55NS4b7\nhaJlOnDA23RmLQ+CiyhwabjJKCh+rJ/CHaJm6r24dAWVlKjbJslVHx9E0ijI\n65MUBDK7oHu2TkspCVxcY8ajKjToTUT8y4XaaZJksdtkGV0EsUsCk8+qu1jL\n5Nr5ZBibrbTEc9PWZ8g54hCGqngl5aNggs1tIfCIlu3t4x7TI1B7bJW74hyO\nCgQLIFkWTU47PeBnCA9cPyVkdDjSnjBC5hORUmiFlLUbyeNCB+ni9reLhiWz\nE1u5Hgb0aSz/qYqpGZUA11F3PTtpyxU3xz0XC+BqpOGkAiVMtFFSK1Fdxf1J\nlThbsglBB2qqIg7Jl0KyIpQfywpSIYGLsEORoLtwi2nqOnw6z+qDE/6ikqpA\np1E9Fxslpn6X7CGn8GyvtCtAlG0sdKTfZapKMlHHM32fkBZd7IKc/4m6GEMS\nUdQmQYg1yGZkpCH/Rqm6m9uQweC8vLn3p5yGZJhzcdLGC4sUZIJ1B8RDzKJS\nhP469LLHbfcW9zbXOOgfwYes96ZCDVUL88iLWcZ+T2eQKlHuSKyiaN25Rnvu\nkajKZeUFzsKnDYCHonN4RnyQA/ClhHILZpOIADTGV4rdW7I1gFiXcX4NbPKU\nMQjJ\r\n=rNeN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2YX2ZBcecI8Cvr/WnVZxGiaN6HmRZJksvUn+jEhNkmAiEAqUntprbn/Riiv+QXfHX095wJHI8jNT/HNLGdZp0eOFo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.9f8337d7.0_1620153427064_0.9324839325741692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.5813480a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-ripple":"0.22.0-canary.5813480a.0","@material/radio":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.055d4f10a.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lr6sXLzicQy5mJ7BEzZPKTOsDZT5qomHnSZ8OORSMR2jMiT0YFdrDgp82awBEaT7WGWF6TDMKrgHQjXnEm28MQ==","shasum":"0c873561479fc4e2d8f11a24817977f0878578df","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.5813480a.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMiCRA9TVsSAnZWagAArxUP/1PbxktxnKwYDgB+kRRL\nUqW5VgJWsvwMbORu8sgpMbegc5fxJQazMCNPK2RehNRIJUYZfQG/sugGGr+a\nBUzwwH0d5tOS7iEsYqi+TncfpfQ/8t7DALMJKB2lUTYZRpmbFrDUWIfbtcoT\nqntvlkWv6Axc+uSthd0sB0CgyLyM0EA6/9R1dH8OwqrXnl6OrdSN5NBrU7ec\nUeHmCXxSJ6eI1FboOfRUsYH+rrcbshUlrheN9tVyWutO9k/Sh1l9yLHeIBAN\nZAehoMGpsOv7eze7Zf+eUQGnJHcLAHH7Bwe2hMugFhdBvu3kBXJwoqY8S+/X\nF0COfoDhtVgQpX77D5NilC0pWwVsjrtwqC7QpvWxCSnhmidUaw1UUiUfIwq3\nv2q3AZW4Fkoim/U264Xtv1S/VkfC6EktG1x9Y5JWrheXkBvGT//DZJt89cMx\nE2h1Xc3jXtwHoTBe2AfLIQIzEv10Snxw1N1Ps7H3OYSpLwFVx5v+I2cUh1N6\nzCWMOdg6doRc+IWBYY95hAIYUaJu4XR9ghCBiGRE6qvxKVT+m26+LLajxWPm\ntDvKiApJbgM30VzLZFH4a+skmmqkM8wOOCd2kXgDhSH8A/QyKhacNGM6/dyp\n5VU0WqBnrFmA4GUlAFnzqarRoM6IjKlZod4Sa21HBimrlVfXo8PcLCGd0hOO\nLYYd\r\n=Hg4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHxa7r492ocnGanGQxFGRUPVcUlqWjId3Bqfzt78Y9CUCIQCdZcUE03JlgzEENcCeZyvHoYOqU11ksvQyqYRXDZ0NwA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.5813480a.0_1620239137769_0.3570593194625782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-ripple":"0.22.0-canary.ab7fc1bf.0","@material/radio":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.03f525f9f.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T8ZCUHnydytudizGhogsA+t2yUIXhZLOx2JR/QLBgfZdQNl+WhRvwybejDvY+/ahfcoRBY3cbN5l4rKKIFwv8A==","shasum":"a9635efa5ccefc3c2c252c982ad72362ee390bef","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6ACRA9TVsSAnZWagAAY2sP/3xOYRgmtc5SjISn4pnm\nTjXipHgX3m6etS8jkF/rZ4cXfH79eHbORwWuFKGhywtP7EQhQDd+UBIVKafH\n0i8euQuUXtxNC23Emk+40Tukw1jaLQSf9maWnOzPjeYma50rkhFHUsXNqiEm\ne7o5bPvdBvwZq8ANSSBhq1vLGU8YNCsLTiM9eBOKjXtpOM6cS9OjtKaQQFh4\nKPCMuUsVqsxX1Vi1PHs3f3itUGkyAxeyCocmYgulUucxWKAzM76bZYkaaLrz\nEw0XR2T4bXAetk2T9K5XqJljlbHP8YW2OkgFyuOcqPejnNJcJmt3hK9IWMYW\nTM4BYPgqMKdXJ+Hh2N9TK47kfpOTQCpTBHJVyPE3uMwqEkPwpYyz05YQPcgY\n+unv3eWjhOiEv5DAIGXt0z2VKHIcJh2LxFQnM7WZ49yiAtWMN76ITtmJ2mdB\nopsXp0OzPtVM7Hfj46F0widf6NsDVP259h13scE3iCkOfTD52zgphHJ5CYT1\nIqd7pDyksEv2gU5VksLGK51T0csRehNT/YNJOgh9KjZQTtIwUaIRzEPcIQM5\n73XEY9qRMOPBH07SCBFRqU1GHQxyJZ+BFDp4avk0NEoQkaIAcvf2UxV29P/G\nkmc8mq6Unp3HbursSuPMFIhfmniXIIc1I6d2YgwiUykjruFyp8gLQL18vURj\ndq1a\r\n=W0em\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrQxVhUKOYQPk/vkyYFlVE/O4Ua1qRkqk+qb0Vng3G+gIgYwVJtPwoBjV8O4ina3YuHRoE+uJ6TMxalnCe8Q0duoo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.ab7fc1bf.0_1620323968456_0.6601483370728671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.25693d60.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-ripple":"0.22.0-canary.25693d60.0","@material/radio":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EqdFPUIZ0oEPfIzEIPYiIdANpDR4XiQPdS7FNQ/HibV2feinylwxDwQrwnosWzd5iiIOFRa+zGXDMCTnf4eStg==","shasum":"34f6b5967a605f6233a5583dad956490d80e36c4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.25693d60.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbd6CRA9TVsSAnZWagAAXiIP/0jauMAevpsyeu5s4aLJ\ntBPhUSRHvENq5U1rFKFnLefhobANXlHy0+UM5M4obSjfCxUw4p+URIkmaTYu\nfzokT8ItyebIpg2Wr6yyBlH5n0GxWGUYG/YPa6/vz6+tu5xpnXtlw0yp2mlW\nlZo16XduZoQ4Qk5aIxWoq5VN4t3ByhyC/uDyWfcwLa7y3pJumAl4z/xzReDG\nx7ig00Ir4EylJcJivCdXt/oPv/I52Gn4gQriFvicUTwOahpDceLg5yG2FDAE\nzMad/t0EtlOcvXFjQx7JncNQ9srCHbh4O/3fyhFa+qgyzGsYIjeU6ExwpY3Y\nZsKOb76TYKxNE84OMQxF7l3SY3UbvvJ+lcVD9pvWKXUx6MuM3tImv9qpexpZ\n5VS2qwzNjb/TFOVHJsdsMITSeFCo3WPtCoMhM/thZSn1cdifIuva3V3Aqrlw\nsshHaZd1hjuBf8tBfJAgyMKA9K3Jp/doAYr3Vral5vQdvA1IzqiBUVzl/jK4\nxJH/JvAygpmlK6EO5n0idC6xPFYYS+wbm5lQZh+guQzLrbQBnWFKY6sPlkFn\nK3e5Gwftj7QSYdEB69/wagtl8Jp/HIVagRcLoCUScdhXY3UnKMtXmY2dRpfZ\nnJf1DphAYR+FWFod+pSvQDkTSt7GkIzQWhxAoishxUF6cEh4tLnTUN+fj92d\nQpmF\r\n=BaYG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9efFAx2sAFAHYY0GO9AGp5ClbSEVDK2zxEzJy2vysVAiB0qK84j+MDGBiF8AqWopKaimT0smy57QYlE4GQHAln2g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.25693d60.0_1620424569931_0.06258628912528885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.c497962b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-ripple":"0.22.0-canary.c497962b.0","@material/radio":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tazbq5OUVHpXGhVvHUicoan0EWawYDtNOSZqNKA5YPq4WS1HIMgrCev8xPPUPyYMnK3wrDYpZmQE6lRWBZJPGg==","shasum":"b91a16194431d091c8735120d0e44628df34c23a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.c497962b.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0SCRA9TVsSAnZWagAAGZgQAIyKBGGwSKuGVlMnQTyC\n/P7LK8nIQ9u5GGcfWnkVDm2NTJhHtQwZ/6Jb0VqgR6wm0SiZtWWIVWtSQfst\nTDcVaBVWScDMvDthQgbNk7yVPiYrOWfwJxppSxwvN4SDyxVfAthEvgtKO5JB\nB2Qnd7rbPpZwonyWddfyPHzAkpIILXT53rpBOog+dwPV6DceMjXamSOZdg0E\nJfnf8EKRaDgNrf2sOLB5fsCGjAxJkcbadNynV909C10/wCZ9ihYRB6YSRRBr\np9I9BoUoGFLYZ36W4rKbH9VLlBhctdKVG2Wp/CfnT6KlT6JbawHv1NEM2yWM\nSsVLItc6NF+60XNRpRR3P5omYDtZ73ZYNsTnx5BlgS50aqjRGi6QkV+qf3wr\nz9OvnhVEQ59ejP8T58U0SP9UKRMax/ZDslJJ9Kvsc5pl0f25EyCIwn1+wOtR\nKug1UsmBsCmnEDm11WQCSRWYyfOfHGDrpwgmgYfoOxKNj2KbxXTPSDsuTZnl\nTz97539cxYQb3z18Xk18kCWaTkDz968pVs176L9lSW6Dh6PwrzCiR/55pusM\njF8w9zdWOldiUuPVs3O8OJn6UTCHcGhEv3dz94D9posJ9kYSVel2nUJcdFLL\nhmcGDUTjBjnqGIxeO8o/gfzOuCVnuyRldNkeofCJurlnk7TKN6k80pdQdMLo\nYoeq\r\n=QDdk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAn1knojImQ18QjzTzJdZ0wZjM/9jPcUQvbt4rSm+CfuAiA150JP4Ku4V77rTYSXQSptAGmjH5sq3p7wX5kgTvmSbg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.c497962b.0_1620426002278_0.11731097282639036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.e300688e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-ripple":"0.22.0-canary.e300688e.0","@material/radio":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eiyb/FjQcdM/Khpf3n9anK1SNWZIkmgdIq2qpQZKVSl4yvQa47kNBS+UMcBohzVvkP7+GeB6QhOWinvSbP7TsQ==","shasum":"7476964d80f855eaa8cad5307df1ae178a0f70c9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.e300688e.0.tgz","fileCount":18,"unpackedSize":101041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4eCRA9TVsSAnZWagAAwrQQAIk4p9ExARyxFveIjMD2\nrmD76bJvcAHuTgGCifATWJ5Ejw8BeaJO72AaVk0BYh2SpEu5uL2+Miojpdhh\n09Zl+YvU2shxf8I+XiZNn8XqhWDK6nyYs5A+/79dueU86X/UPNGsd8+UhS+3\nIMQc77usT+oDc9z1+EKIzOgyrDhqav5l/znPR1GAwHh517XIABl/RKN0w+VJ\n577GhWNEgWu0OqilQB9z2HZwpfa5bqx3/GlZGlTrMHvvr+TMk0P7a/DF5T0a\nYAjTPnj5HQNL7sauuDRMszt+Is1a85F6mJwzeQgSsRGXSt0PvFmiU++ubdB/\nJfJG8Ulsdl0D5XQPj3WOng/ifBMaChHGQ1R3KVFXT4kibkpuCgMsXe9t0y4U\noXfrmJmqG6GFrbFivIqhpNOG+ZJtde5yUWmVrwdyI78uOdN+AOjNAAQQTdUo\nXuQ88PCakmq26QzuccCHByHInLcYu1OZP62/1Uc3/AgPp+JNpfc+cml+sFpp\nKuy6PXMJ/s6DWx4O3cTJCANSAC69R47MvGew/utcSbVMhE/lS7/BnBk2dd84\nGzC6NwVHuGWi0JeICb516Ndvha3G0GxHgYcsqGjpcbkArtUaO9COeWHVjbJj\nzFWPNJAlhGIFKaQHis6BH8S3y1sL3BuA2H5vXV68RPehxpcLcLt5NIIqeVmr\nRBY6\r\n=wh9k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClSfzf5rHnJJgUevDXq+nTM93sIBFs9sWFp7OR1PNRMAiEAttxVAkid0b1pirhfKELytZyQ/ker1k8GY45hmKeEj6c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.e300688e.0_1620426269701_0.6892427444597666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.d70287f2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-ripple":"0.22.0-canary.d70287f2.0","@material/radio":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k03LV2N2/gxujx5hkKRxKkvtxR5FPhW0Nb0obItBfcElV2/5nR2CsYAzWcbb4ADUvsZBuWMWRtQEA63gfhpNxw==","shasum":"0883ec0aaf5b0cccc975e3b5a6f845d030550448","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.d70287f2.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmTCRA9TVsSAnZWagAAe0oP/Aobn8d8uhcqf4vTK4g0\n7wmyKVaww4OvOnTEJn4lKre7M5gK9O7+X0DJAxFptoj6t6Pi4l0jMzZGXhgW\nTIjwlHRV00V6LVYyk+OdCQC0lmveutLjvJFXLvMTm+80xKqPgLiPrKgDImv1\nCyHv5ENQamAtTrqsnPqltaNLLaT8e/i9/hEQDJGBWS4cAazmQhy1xqFcy/b2\np38caDHUN6h0Sg0RCTUHwuzkpjREOxrDJJh5b/PiNuQvdDBV0TPUehLXfIFH\nY+kfBB14FosmwBPe+p2bAtQEQ1EcxC/eJDL7tbe1UC9RWfiXTWyosUfA8kV7\nccbwt0+xgVVDUXlnHOCWQOU05VKyEg8UDvONfwYMhoPvWLnljrYlqID6aQDn\n1/hlqvyi0UzLVCO4nkikn+FxJomwYd3pPCeCPkgLNanYSTd3pwY/+cIKN6qz\nkCnshYByu/SX050W6KqnC9bL7q+RJTexblxcpnCrrVOuSp6zU5e99ENltCvZ\nLVxzYI5428kFQk+zHxi9ZL+XIqfzZSroti6/FPzJTpV1rdz1fvjqHzjdodWQ\ndHcQkaCVmqwvwxJXzTbiBg8oYwscqWrtc1hF0rgQG01lKUGPZhz6Zqt/FzjE\ngaj0ZiCINIkeZGeAm2GUoioRyYe4uPNUSM7jBQ2FooE/WjQLdlJCVnBJxDNq\nuafy\r\n=q719\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIehocRPjZ/coUffWjTHKNcoGrXDZen6fd4mLyCxVqKQIgFyIXg04UCUdZINIrBJ//2ng0uqjrdCizNchrpVnD42U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.d70287f2.0_1620674963259_0.8196320943026874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.02e841b2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-ripple":"0.22.0-canary.02e841b2.0","@material/radio":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.869d890d4.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nl9ahNaQU+wgQ0FyZntcYBHkXn4UsHgCMwlw1dasKtiF/G5s1BV0uK78XmBk0mWYgfyQVK8Y6CcSA8EEtLW/ZA==","shasum":"2054d508c899b9a66c93d59aa6a6fca0a359fbe3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.02e841b2.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjiCRA9TVsSAnZWagAAj8oP/2sjJQg4yeQCoYl1Bo5t\nd2vR93dcj91RbpvPbRn82wfAWltC4ubHlPlXkHU+cf/QhC0CZp4B2g/fU9A1\n5B1ly4bF8vBb8W36BYYJYDYR98fF00sP6OPH5Jy05C+lQHPubctrsUPC9uCv\np7Jz0tZztBmNJ88UXUc92idpNNtibJ5OQP00f/W/NCWEgpRSaLtwX6ijFwyU\nSzIjyRHvF0/SqFdypsdk+ePt1ioWOMBOqAgOzP/R29IRPlMLNhliLSLXuP3A\nSf9R1z4Iq+aqGbJ/ZldoT2PWCdI4Ejtpm8q37sJQzZoER2hRlGJ6xjhIQb3D\n0D5mLQDY0p2Pz4tIE765J0x83xAH+QeDC9xW2l8a0JW6KXKpRMFSUJVVB02G\nDYSb8rDl9UszB55G0vjYVhiMbdUxP0QyExgz2Ph7PaK+E5Zx1lGKk1wfRM92\nv58w1DIrUkeijklQvExIoVe1PpiiKIG5cnvj8zSIfn5ZOWKfgvrtpKimI6uw\na2Gq17HgZlPmsT42VC160HXEisx7slLconhBIHDT0efNlfgpj3/aYuTy3OIH\nGs3xeJJx5ie1OatUku5JHTp41Kz3qk6mfzKl9PAkqLIftSHkpLjX216Za2GK\n2dfGYdi9dcJkSz+SoQJXS4zLc4Cjil1f9zyRpdJgE1n8yzYMdhvSr6PYCTSz\nW8rG\r\n=7aHT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9m1ebeYFemHUFphFJGs/JnJN6avCfH/9pid8YOsxotQIhALBNO5XUnePDE9SEiZl5QWG5Pjw4970cd51WUETWJDte"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.02e841b2.0_1620678881940_0.9046706012521237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.badda2f0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-ripple":"0.22.0-canary.badda2f0.0","@material/radio":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZhW6uip5UHfwH/llHMAoAC9ugLBJ0GtIPUC09hdhh4xWxLp2PpUs4CMtqTS7hW0aBh5LDfhhsswWxN9zSsIm5g==","shasum":"70bd7532e73c1d4e73d2781ead8afe0566050c68","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.badda2f0.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdElCRA9TVsSAnZWagAAclEP/21d5CVMGQz57Ey+77gS\nGw3gdtSj3K2HjvPL/hfBU6h2E0fMA9deBw6OCWEEvdk6eYSpzWktJrm9ZW1t\nTrOP/LpjEqQeBZoD/GbGiA0Fe//FH4iWuXPL2kYGjM103t5c3ZF6R2Cd0par\nprzd8vtT924D5P8xuoLXiid+wHVwVhVt8s1Sjl9eH8zC/yuL+fpi2srVYFRk\n8TSxaN5rgsq5sJkTqy9j7LJATTqs8qsmksBq1tKWaVtmXqBQd5ogf6mw3tKn\nJswq1EhLN797S94mdw4vHzhqQTPrGxX4sg1QhOH83TWie/k7jDLTOT+w5xNM\ncl73NiVVq6gXMCj1Dyn2z588ZqD5/L0VA8aimh/N8N1PYdL9OfRthFF066+8\nd4HmaXtLgSSTJsVhgtgS32+VyR0Z2QdzGwgfa4/k+vIe4noTumAKd9dkBzg2\nSxqNPKk5scCn2GKHhp3X+hNG2xQtGuwk6AVql0cXn+TC7cJW+936xWCnBzWY\nTwFNDG5zpGB4KNb+vAoDYnDqVJWRUDVvXnZhuef0p1AOpyonZgTwGLGpRLIh\n6ISRrM6VU7Futx4jlMb5lUX97MGAzhz0PHUmpZkhSp8EjBDUiHkr4TcJfUM9\nw/lqNkzSLr9yASODuGmqY0Pi+FrkSIwTG4el20GqLQttzXmoVT7UDF2is7uk\nhGXI\r\n=mb98\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5PAmKRAe23VkempSBrAuRYC8D3yF2ndr1YPIQIBbXVQIgVUWuv/weVD3SdD1LsGVulahQP7qgYRabbay7HTCOnGA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.badda2f0.0_1620693285182_0.46024042978799606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.004aca62.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-ripple":"0.22.0-canary.004aca62.0","@material/radio":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5pnF6hQglCwb4RR73N4PMwghq/L4U3LtazXADJqPdIGOouYov+6EWFUwBuJDT587F9OLAUPolxw/3DUGNWny7A==","shasum":"dc483c8da15dd008e95ebde437202e2b2fc8a17d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.004aca62.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmsekCRA9TVsSAnZWagAA4bgQAJR+EU6GhRMyhbtUCoDq\nd3XBh2gEJpbtkuMhjNQ5H/3eHndif0mfTiLQtuj0BCYJh4wwOoF9gtja+jwn\nvwDz/wMdQGHPKxkFkWIDpvjEG7JLevOJgcg0PgfEJq3MeR0mxUNXtC01tKfl\nUJ+X2Ynupfy6WASHJQf+SZHJLoH5pTpUQ7Ph/BMuqMjUPQivNR6GPRNY/3+x\nHsxHYDZHejYpfgy6AzawpdgR0bgDY4h4ubkaiDRgltngzzjyhVfK7cUldETA\nQJsCtSFa12Aa1CaagmhjDLWlf4C9/lMNvTfebJyp5msX8Ei2rtTVMDRRsuaY\n/aEVF/vI7QPAZem3aWPk9VlI7zWwScunr7cLnTljqgEKOFnK/MUP3OSWJ0XI\nDWIQ/yxPWuNy54oJk63YCNPvuBdg7yFYLTXQCvCruvt7qYXg7yyCrl/NF1pA\ny7qJwU/J5WSrudJuwmkNjRDVEmvMKqVtajRkw0mT0EJxEnrxqARXW2s4Lw68\ncED/CGXPWQe7kBg4SU9deSz3WX/wK3olr5MXCi15as8N8d5E2QBTWX9BbIp/\nSwwrKAQ+ugKyLHloFCpW7wQ0ba8+mwUCny9m5S8bl4j9x2w7YVLP3vedjB6r\nOpdF453JPp/dw5a7cm/9tNF2ZuTcyE/CfbJrMFyTT0QTDwU7QznRldmnwsZP\n2DGX\r\n=TW5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACzZv5siiNMHyk6g4k0xXOHgLNWKqcaXzXjndmfJYeFAiEA1vNkGNxUvdOM9zHQkjzGtBg8mPaSout1zUbXHCXjHS8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.004aca62.0_1620756388039_0.10723407364572646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.4af17446.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-ripple":"0.22.0-canary.4af17446.0","@material/radio":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oO2k4I7XthXq3D0IMkHHjBFfv1bAUSEI0h0sf0mM2PQ9PnWdxUyGCY6aNz89/dnbjqDUPTw/U7Zs5CF2/IcZIw==","shasum":"a5c99ffeb50707cea70f0f0a5e7d59cb225aecc3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.4af17446.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtD5CRA9TVsSAnZWagAAOsgP/3bBal+9j7QTC2Fbq4BD\no0pgyCwQAFW0eJwMcSGNsErpdIgzsfSVX4jtdzrXDS8sRcB3e+v3qFIm1otv\nddVLttYiv/9raYCig8FXyGQwi6sMbVTRaZLvZKTRHZOh+B/ltbed0nlpVCjO\n8ymACj8yWPuOPi0PW8hQmdcPTg6mzRygBj3J2wkdN+qFEnwoKeHZ2yG4+Oph\nYeLUQ+DurBOcJDK1QDB0rpNYUWQz4U3fu8aC8H4i4TIxm5wQSDsyZmCa3S5q\nXM07llNoC/jDC0dCjGL9vtrEVGNzeowPJ9ONpP4ztWCcDPTgIXht1NQu7QB+\nvvkKcOwsQ0oJsuLAVuILov7TtNKMujuNaAz+7q7oT99k2AbjakgTA7V6tZJn\nMKl+wq16J+hLtuolTfFaNIl4xt6N1/Jj04NRFMaZosIbx2dYP8HBP2nz9DvP\nd3imY11avrhuEQGxXdTsrx1CRR6zYHec+R2egw+PCAu/VdX6+ODoNJ9RyOKY\nCrn951Rzs49ejZYYsCinGZU3AFBW0NBPOLsAF2AiwzmCxHiSWUMbSZSkV4dq\nilgGCtTkKEQ2mZewIiC/xQ8b6TaYVDfty8gw0f4L94PlA81n2Wibuob8oa9n\n08qThW4tMDMDeUwFdbi7HYwl/ZaLstR+ZcnU7s5XQ0/f1g2epcG3eZX+BrSv\nFgdH\r\n=TP0E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC/ftLQQ0uLWXritetG7IUBKaKLe8z+4fOn9AEcn07MDAiEA0V0FA/ISwRWa/m7nM/m+8mAEhbxEGDnE5tr7yjRB04c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.4af17446.0_1620758777131_0.36049226245070587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b94d7187.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-ripple":"0.22.0-canary.b94d7187.0","@material/radio":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec22e1da9.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YOiFdU67Lm2wwPycjTp/SwivvwPHic+rP1Hrp8M8sbrTuI670ev6gXOf1WN02uNXZHax3Er74IjLwZsHk30rnQ==","shasum":"f40735039aa48685aef8efe75dfa57b1431c18fa","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b94d7187.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJGCRA9TVsSAnZWagAAqIAP/j4H4kZXkc2R21BN9Vbw\nWoytnrRBHSgufGVI3nUVmqAw8rHPuqgHSm7Og7qirXIQbBF/fOXQxmJzRQJq\ni+xUxdUQ16Uu47+hKRXJP5KR7rzRqbqmyPJmu91G/M4gL+XDo1hZ2ZnsXfMw\nZjDRWta7buB7xdTq9ZkY1BaWHK81GK+8kAunMMEw2FR0BAjPEmgSim09a7qQ\nDBCjCDxBK7IlfpRqrK2IEDBnbSeY4cA3Pm4uKX778p/kYo7UMkYMk6EhX0cH\nKeGLQOd6r7cc13YPlEcbtICAPmY+vvKYmcIIEQzSjtbB5ggN31Vefx+Krhxo\n+2XOUSWtMgkrHvUpzH7w+B1GJgKHkW5qHh+KuSEvOyDLhThj1+AlgG7Y0G8n\n3fMnk5bkNfgDlthnqc0w4bMOJNtUEtXEOGMmc4btR9GE51BU/ySW6qiTHPci\nGLur5cgLq0/ezNe2Oqy0hyMfxEgxENPzLQWGj+DESXTQGVwUsmTcoRQvTtvq\nImv1foTT8osdBpRmh0cEkt87Oas0Kbhyi9j8yYuGCvIB1neosT7u1EXwS4aQ\nyaooilrz4kWjvaeOHIkl7l/aUAwbGAolXlxWdxMUw/ihNMvbCqGSUpTuybl5\nw8w3TOYtsMcxWwlQnNqoorG9QhHDbxigiiZorj7gy9Zlv5zNCY2CZop+I4V9\nTM1F\r\n=NiUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoO98BX288G/mON9ZzpNMTPDTUQjUdeUttFhiVepClfwIhALYOE0L3e+CXBYWEOg5qtd2JuBN11N6Gz0UA8Y+kSdGw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b94d7187.0_1620759110104_0.5750693300865519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.4021b2f9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-ripple":"0.22.0-canary.4021b2f9.0","@material/radio":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GB6x4a9v2wp+Z53OM3DIHbNKeS3jhfqR2/JMsKRQEcEdF1/+/eF6uciCLahxvR3hx6lHE9+zrQIpnWDJvbWK4A==","shasum":"70a0cfdf890c02d52df99e8a89b11a3067c28257","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.4021b2f9.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFANCRA9TVsSAnZWagAA5QMP/1E5H5YeSGr+n9y3UnKa\nA4DrQz2yMJ3nnxL9BgUQC4Gd0lPiFdT8AFvQrZi1jrnJrDpYryouXwjPliwG\nXcJiqmGyPBrTimokkgiiEkhqMN01mSjdbp4jzFWRwnBG6eUt4iF2HbbKEjlo\ndkzxCiJ0KEbVc2I6AXO+BDuG78hv9Jeez22sFrS5oasExBf2/GzWISlUSEb2\nqYNIXtzLBVJhHwId25vOVbWZjPUeI6JkmQQUVsc+qF54+WfUAwJKlmblvgGf\ngxd9RKxKBq34o017OzvraenhFU0/c1MdnU+01diHpGx+cQT9siXPpSS5LqXv\n2UV+19iA2WmdqURjpN7dqfGhVoW9oSnGUqsk0sR704ZJZfS2xxo5j1d8RoFX\nyZLy8Fy1VM/aLrkzko8aobTmPH6mTGvci6XqsmYaWi3Dw0Xsr6Lx2YQ7NUAy\nj/aeH7I37+UO1Sy8s46HO8G0AwJFRtjyDkkqxeajBHd8bjIF5C6YvDyFACx0\n4cwiH4JyP7uMCovvCg2bujXLlPkTPQ8VwgFGYo7Ag3Ph1nMrJViugum1Erey\niLks0clZ0qdV1h1BJ5fbpVTTo1RR/+I1TksQg7urtTZSy5riJYrC9Df/1Gsb\n9j36ey1Mf4ndhWjVdBC+ncuHpPXNKNalKzCt4+BRw9wFC88iey4cSXeoJxbB\nkYfl\r\n=Qd9A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRnnFCqjhuNVesT/nrwxsYfGa9VwXYK9C5Vo75hEhCBAiEA70JB/F3Z3V5FJICwmdfyNmpL2RmXvm8Ir7/msW8myAw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.4021b2f9.0_1620856844709_0.06066789149324414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.6a5956a3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-ripple":"0.22.0-canary.6a5956a3.0","@material/radio":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j/Vlop2GT2BuhMsqEv4q9csrQfnMbft44tp9d7wxIBhvRrFt7OtuNI22c88edMLAOaP9+rBfOy8tgIYL0Eeb0g==","shasum":"86e3137b281239665ec2af63427414cc84de4865","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.6a5956a3.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFP8CRA9TVsSAnZWagAABmcP/jhZF87Nb59tZYyH2t29\nzDDbL+tgpH9jn/lt39NZeker8M5w5ayt4eXzECKzRcAeRodxRZs3Md4W7EQh\nzuQQNWJgRhsjRWs8Tr8xXavtvY4IsKb7UVyYBRC4hVga+Z930C7uq+uQYaSd\nhdhUKbZK56AXScbq3O1+CzEdn8LamXO/lE4K6jnYtBP6Wk5QfAvdoxMRxeL7\nJmXHY7LoFbB/LzgPz12DEMnt5RJIYKXMT5pEf40q6APBL76mhW7aO771G6Cp\n7aYMbHj61NQfyYP9MYwjBYvg7R1aPl1YkI9ZdLfBv+oUXr6CCLgyLHqUdYYJ\nI9kTjjsw70yzCldljTUcfn8oxPRya36tuCTaH9LOQTg7BhwlGJY5R8XJd+c6\nmHar77W3uqU960T6zPiA0p5Ita45x8KP0EXG9cMFvIWS5XetcP7W7RfQL5la\nzCtfxf3eDxk31PvvXALKrfSDWdX753sg4oFh3dD0GluOoZ5M2tBbOPJeacPD\nEuCRQ2gM97nu8GTnZ96PgMwmCFQPQK9N3sPtX9JdC4IiPmUubC+Ph7p8KVjQ\nryCJE7fUMECFKxaC4Yy2QlbpgphwrlIHmaP+U48EQWmBB7QlODUlaz9i35+U\nnXd8qIfqppnsnxp8omgzGCUOzewPwOtR25gYakYJSAjIQlcvz4UdV9vxcFJ4\nXEDh\r\n=QjEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmJQrZdRmhwrUc5WcaRhuOSmO/i1KzKauRyJBiRP7dcQIgXMkOw3QUPAiYNzgRu9zlUYnWfYS29X1EQpL5cMKVsbs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.6a5956a3.0_1620857852431_0.6206741216757317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-ripple":"0.22.0-canary.b6e8a74b.0","@material/radio":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TL8XtUvolqSasFqX+ttWvW5TCVzmpTrvfvSFzKiM3a64H2F416ZkVFuKHQ5W67YEi+hTsEg7/OEa5nXUZqZICg==","shasum":"ddb098c80a3791d0b8954c7623b16cc053df505b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b6e8a74b.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7GCRA9TVsSAnZWagAARdcP/2y96/yWG4C1Vu3wqLhg\nZM0YJiBbyWq0IKIyMyY678V3LlROmkZi9Wqf8gWKWKOQpDfylztR4BvJNxB+\nqT9IzmuVv+I+hVvO0mK+OLmfiiskNaW6u/mRla3LpQiXQ/RFU6Z6GslAYvM3\nf11ZNKXnOxRykM1VqI2WYcaWzxo/OCeET3Lww+Y6mpptSCUudQI+Zi2dNTiA\nsbm0pILVYCf/c6Cbz01KdrehWrr3O/00s7BvBbrDr7CY35ZLiWlkmv/E3ehl\n0PvbJ0PIUvWpxp0voEffuujA2QI6dz8S1W3723AnODhOtPTn2BsA9LFn41G8\nIG/kU9ebGaGrIUa/n94leQLXTFeQCq1HUoFYyVwnAotIlBLNuUTgQD2TruCq\nmLUsQq06320bTg+EUSob6wqa0nRRMZdA4tDqiExr4NtGILeGy3VUs7EjOpjj\nyX0tHWkTr4T0F/LHpA0rRSZf4dAwIQmRYWaamufwNJv7g+X5nvBXr5N4Yp93\ntF99nbxqIePprpSmktYYPXB/2vez6rA+MFK4ZvRc4dklzPat3kRJDa8UL4hp\n/u+T4v9fmWO4Q1a8S6YWei2o3QV9ENBjprEhcV2f9VNT/al1XLBZccN0vCKI\nb0/R6Ix6dbYnTB5yAlSWWzfLY3QI5FTe+tYXRB73v3c8acgx4wHENaNtGm/1\nGd4R\r\n=sVrc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvRsOJ+Vk95PNdkNhDCKlacZoLbVjn9jfTi0ghOPGY3QIhALVmn1R3GvQ8VfE0HyT291s9LQ2PEP7VzKBPWO8npqB0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b6e8a74b.0_1620860614183_0.30889986198598396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.c94e1030.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-ripple":"0.22.0-canary.c94e1030.0","@material/radio":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yLMLdet0q6IhshIxnR6Y6kUEwxp+XV8X94PGPVjU1G4TpipG7ck7KeWjPcIgK5+NrI8danczZ+VCuf2AshSlmA==","shasum":"8c1802a78cc210405a824bc249c863e2c32f7aa0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.c94e1030.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAiCRA9TVsSAnZWagAAyywP/2qPfP2uYfTUSJvRfKKY\nrf3GdbPfkMB9Ss1wUVwd0EhsELpBV23WF1KX9tjKX6bZbdBSHvtlzAPsjaXA\n+77mH67ZYgZU/sQCch0FdZJ+yXW2nrc9X+GEBbbiC45u729G6fVYiBFjFU5O\nOp361K4BsZYKAHBJk5LOV7+1YWxTJWoLpDMCRRn0CYohX8W6fkhF/kNtSxzU\nipj3GytJK1gzBmhfYFG3oWk9vH/malDPkUB1mYKRJK0JrAhSce0wZ7DxnWrm\n/GfqgT07tNR2T8nlP0TeTlr2x3q7nAwBJdjZqKX49UqeyjqkIF4qIiQ6r+xy\n3qc2gWwK6VKqzHA3GZ7G//GXhTfBjmhG5IGx5SZhhW6pP3OF/P/8MusB2XHn\ngY49ixJqFWmFstJxQM9GO9GFZhYO9iOeqyjUjdbSgIWJj9Fn4uvC9DKKS/kZ\nm84oVPU6nWX4VIUxMQ/XRUDiuoegFSLskD01H06zqZf52y8pXmCUPs4NcT4+\nOwfueoMnnttq5SXpHfkbA99BLY9h/W22TiGN8RoK5QdMmOCkmkdXhixbxoaz\n7L/zqCrQj/wlHUhjVUtj4EV/rY94/bQaf5H9LVs6NYbtLjOSEpeF7l1IkDgN\nEIN/51jlRqnmF5Bzct3PfgxvuQEOfR3GU8KPzFY6mhbxTtCE9fZeykMSnv22\nk13V\r\n=kZ3A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWyiVFI29HhDdlVSHx4Cqghpa1tfWa7usF/1NuaWsk4AiBWGvZn9ptMh52i2OXOIZpCa5VVJ52YwFFECqLchq6Dmg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.c94e1030.0_1620860961984_0.7441173413830815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.40a34e35.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-ripple":"0.22.0-canary.40a34e35.0","@material/radio":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kYH6Hs7fW+BeICDBZ3qLyEMxyU8xzixcWz69TiSpiBFNq0dGcPKAUojnLEr2hOysr/ZEjYkNpIfQnjeVVTKtSQ==","shasum":"fd3d54cfaf21d42628dd3cccbfe4b75085d9e03d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.40a34e35.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuqCRA9TVsSAnZWagAAMWUP/if3SpNeKzOu5RqoKMtZ\nXT4VxrfNod6G3tE36L+9lt87g0txq2NlwOEuVJPmhas299xXETYigG4/DhWc\nLnZfqNX+kIAU2L+UMRtuUngtNp3wpwjwGhETP66fb0xixAYCVRGfg5Z6CwE4\n8KqLBNm1z1WI6Ofzd1hVS12BGJhIwKHlbAHe+YboeIHqblvyvUoywqMc3IdX\nq3lbILSchY3Q53+TdT6x4OWcwl8Kpt9elO5CDG69i+NIWktIsra9lj+pndVN\nZohv1d7I/u44L3GtQmADlP2Fu/mwEE02AHd3MUEYnvvzjFQnZ7CRdaQGB3s0\nVOSOQg+JkZVHT7okc1cMjZiSTze8ql2Wwy4SO9dsTW1xcvvpYrbq5QezGtc6\nzxI1bE/BfRoR3PjPryHuuAmeTOAFhbbI/MwlC/Wt3N1zbaQHUzpk+NImce3T\nBJJwbu+UYAoAXPFN3FCt89npmHrT/HoT8bj/kC6K5uA3XpMcMPwHNU8BFUhn\nEzpWainOJRGimXqHEuFi/kDaNcOBU4Kqjvc/u/pZmefxUfkctNuw5LMbc/R3\nP36r9Dq4Neb7sASoimV1OsqSV1H69TCMlOiJn8ejOGKlZUDGxIyB6e93OZAt\n8/TNMJKHGs/CwFWv5860JYSQ/doSYm/OUCO1TokZM8t40MZvLT4UBOZJAuQK\ndp3d\r\n=aySL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZMDcS1e4CJlwIcdsEKYs/LKpfW+Rq9u75qQ3vTCd59AiA67nb1+RqQI5sXGxVQgxjrMwuwNbttQtkEm1kbejtRcw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.40a34e35.0_1620863913641_0.319204603496996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.1be14d2c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-ripple":"0.22.0-canary.1be14d2c.0","@material/radio":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.a23ecb682.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FvsqXvq6aGTNfO9ULYWCc4DyDGt82fnL40+SMmwRrrLwEvufevyF7IBOIXml+r0cqjkbkHgBppOTjR8bJTqWiw==","shasum":"9b976f0c024d1551a919e342a035d889efad793c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.1be14d2c.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbKCRA9TVsSAnZWagAAw0EQAJ7bH7PhJatYsPe9nLyx\nP6XAQIiUCjxC5EuREuCLz+eAsN9+ZdiRe4n7zfUkXukVwlxuwrJbTnIXTr9S\n68nKh0vMRgWfYDuSUZHtnzQLTKjeJOSDR+DQhFJ+TyjI64IlUir6Ix4v4dNY\nwV2uAIUasoFdi0dPOAgL5AwQIRCtbKFgBiTl32PRoUtYzx1NL1KnkeuDyB0a\nivhZHSEhkivRI+jtmXMoGWPptB4Q9dwbUfxvCJXQFZ1b+D2ErFajBqgsLHLb\nkHgLDHxXGcBjfMZg1tI7/9Z3IFoOmDAUDVWbOlqE2W+Fp1+kl5IB3TwbsTy7\nvRIiswTVmjKV01NfnM4FYMgZSJtrspVpSjo5p8YSDG1DIT8XFjrsEuPISORk\nLxnXDrKNcwoZaY98NfbMFEycExeu4yG/4RPZezRxnE9tosOcDD67KtM0VkiI\nf/hYscfEv4LBLZEN8b+aKxARRkbmlIWhgilaiEHqG+02f54ZzHWZIe2katIZ\n64dt4GyKq5wNnaPtPV9G9Nc0YDmR8EKEhtnNo0TSfsBaBFutpLTrt0YQc38k\nEBSUjQ0sVog2tIixaklPAeAjnW7YTDM8A09Rh7F+CCIV4e9+HeXSdoE9Iu6y\nsl78j5c1feDGnC2pcdkRKoVbKdNkNLfS0ptPrkS3eEqw1WWKanJJ+e6pxTEn\nMsIp\r\n=hega\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrVCzu8ZFQHjRXwhTcpN8kL4eikwQnM12GKlz+BDkRdAiAey32HlJNoudkfNldYB/wXotW+b/dnhEbhEtJudU424w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.1be14d2c.0_1620928202394_0.7757235728742433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.87dbd64f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-ripple":"0.22.0-canary.87dbd64f.0","@material/radio":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ge9YOs5G04KDnQlbbKZSSDxr0Snb6EBqyk/xcDcTjeiq/6eNR3wB3Dkf/HUtLqWxzUSYRh57HTi1iwAxWaAWoA==","shasum":"3c3d9a5ba0d16ecf4d4f7834b149b1037b56bebf","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.87dbd64f.0.tgz","fileCount":18,"unpackedSize":100992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuR9CRA9TVsSAnZWagAABxUP/2/rdJDN1zr0MYHXV4oX\n5Jal7XBSSy0Eum6MaPv1ab8RwVS0udSGE1TBY4CuhqsVbj555rxFYF7FFinE\nlMXr85gSb2c5ZJ82bSRhqANAWhZ/lEYDW1G8w44bpFXKpoc0hoXi2z/6Junr\nMa5Z5sNaLKD5elrlbxV3A79q4MVbfj5jAanpGXnAIoFb5BL0vzxp8bNDI8oh\nCQVrVzX33/ZxiHEqtw2rGC9qB23GMHRbkFHqB1cra77ojuRy/gor1/QyqvLE\n0iIPpNBZyq5UbeWU8s7InmgZrSP2yLcZQidAvOpwqY54igwVv85tkSrQ2IQz\nq0CH/q3PLYvECDkrwz+4O51J9a6NoIzeIKL4uoMn8TPRgAltgLStd9jYPmAn\ngGdIgw5/RsloVfTNMt4n51S1oQpywiGpBczW4XplGjQ7T5w9JNR4UV6U8HYC\nUXaGIaoBGLeH9qtClPZASyulSUAQwfWEk6DSCySrEmQunFfm9mzoyyzC526N\nbodutNq5PUWqnUKXYilAExAEhq18u1YMrbC6r1pHEcJZMeoZpoXJit2iNTkZ\n27OlgNOwQB4m1WGbCEpY9/UC4zMLrOmJmlg+IYTjJ86UD0bAIiPF7jL2ikf8\nMQ1Z58P5BAN32ixmvWg0MpR9a9zRROFElrJ8ueg5mQ+P++B6wkZUB9Qc5MZY\nh/03\r\n=RVkM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz1DIqVEtk3Mxg+4FB/8gyeWHsGc0sx9L4FyAb6h26/gIhANozd2NVAt+i80NNyNVR6BSFyPflXTFsEGdH10Oox9mS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.87dbd64f.0_1621025917169_0.4911685596383173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.c452e4da.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-ripple":"0.22.0-canary.c452e4da.0","@material/radio":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jj/EW6LfIc2ZnecWa7crVN4DWDMlZiM9SajVz1qZd91i5mrEuR+XMr5Evtbig4NN3KEvQkJDDjnTYcQ+pnsykQ==","shasum":"77c0c031400fec0aede806e9b1bd0a69bc9533b8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.c452e4da.0.tgz","fileCount":21,"unpackedSize":113895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovz8CRA9TVsSAnZWagAAZggP/1W99duLkaxxsRaEjg8i\nif82NAxlHXIJ1/utUDhzVw5bMVl+o8MJiJNEU+Hiy2V/TeNWPGDUwWgmjV7Y\nursPqSJM6+rpVVkdqWi7mjS3hYoZrjeZShdlIbTo0MuJma/IqbBDon5Yc+tj\nHXwe4WCA71cfxAgyUCKJshUoJXywz692xg+pgGAfXpg/QKvEgL9W27QjyVtJ\nn/nsZ5q8JecpI1yRoCcOUuPhi8Vgddgt6GLJ2sOmRbhoVQ969LLq6UJcucGd\nrTnpmFrbJFYlfB28L/UGpn04e1pKiIR3WAGMYwBmejegW/dnCLdYK03RLlsb\nm/0KCC01Nq6iz3g4E1fvsdh8Ia7upzB8zrJnjS0F6WCrDZD9VcYmUemU9D7G\njtu6KlCvCuXgRwDIHdbmFlGDrmJ8cbsB7ZtNzBoomVt32+/nMTba+0xQE3Yk\nyCsmE3zu3/b4qkg+rbKGKSQk3J5DwKH2Fruzex9VR+MSDmPSbGkwkFAtAlGk\nrECC540Xs9B3cy1dZ1MY0ioFyOxc4/HIbuC9ak66kRBXhQCyLN2Ewpf/n9HG\nMRHJQean4/KPpcl07Ur2er7fikSmZXbCyxc4JiKgOMqifgh7KDpH5uxR1nLr\n5KHf5QaboB8wjnNtaqfnRIzNYvVRmJyhYWo6BtTnyIjCUUluTUXftvZH1m0M\nX/Qp\r\n=KfPJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVCsT95zcBdFJv0TOR1t+O0qJayE1Al1cOarf2jF30agIgO5OUD/bU+6FpBMHAfiIRaj/JIAXbKmwDwOGVVl6xx3c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.c452e4da.0_1621294332457_0.6169146486022214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.2212691a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-ripple":"0.22.0-canary.2212691a.0","@material/radio":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4STu+qa/rBQ7c8ZRJLMlirtPEi4ojdYMRTbHKLOUb/BZ3fHQ2YxuE7yBcuyMW96HmRrLq+YTO1bd2X36k8cCXA==","shasum":"590d6aa6a81375b47a340876e334df0c6509f365","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.2212691a.0.tgz","fileCount":21,"unpackedSize":109217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHSCRA9TVsSAnZWagAAcdAP/0zB51z+B/SmJ55gZ5W4\njKT5fHWzcd9Rmt2amaR3aPho6NP7ZLh2qj6+GyXPY6EjmyJIi32gMaxA/GFq\nnZZ/6laWIxENN5NJC7dsFq/L9catvv7Adr9wP1VCwDIniH8L+zEp5HKNtp9f\ngmVz8mVxXKyISLHSNeOQA2bK2TnJ/ebc60mgGXvz2V/bzFbWc2fJqBMTaONK\n2pLupgO4YuYnVZrzlsJP2S5Bv84aXZz1UKv9F5Oi0OEhDWsdX1yfDEKKN70C\n5plDrEQ5+15lupp/raLlaNNUrGVCYV2eKaumIhsJJoJo06i3FjgFsM8B56iW\nvBmSv05mThcmwHBpB7K7vUv77dWcsfufjAIPJYQ7+famlWDHOLjBhPCevfU7\npsgiSHAbP+M41zkhtL+N95ac1X7IhNANBtWw3IALA3R0QCBcKSMJ851Cn63t\novyZTv0smGg17Ut/Xj4+MtZcye4DH8+31AlGr8brKhylRVdH4odmcZrtalOr\ny4BfCt0f5WpQMhrtP6UDWxNDP7jkqrquRVxMvPireiZxf9rVnlRSwK3Ph/x5\nYPwKyA6o8iMB57Tx3jABBjPRuUjd1RXiZDGqcQFflgdfAFlx3dOP429cC4M/\nD1GMsu8mtjMU2ffsbir2k2dGzlIVbGHU/EX160ayJltyYZgIrTQ4iHDvoGZ/\nkOHg\r\n=7v1w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXDadsPTgf7pMn+C3yJyWLAK+KNCKw8CQqMVWF8GpaswIgHl5nkasSFOhzG70k9rqhcUQqB6M9vKpGD1hCtby3Zyk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.2212691a.0_1621295569947_0.5666031671538838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.f748ff2f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-ripple":"0.22.0-canary.f748ff2f.0","@material/radio":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lGEhv2SufRwzcpgPzxxsnd1PtELiwydXjawulyEZFI4vL0eOR28VBWmUcUS6c4TpE99jlNloJI+VXyb3AnjXaw==","shasum":"4173e7e758622cc10f236679c21bfb63a20be568","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.f748ff2f.0.tgz","fileCount":21,"unpackedSize":109221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjSCRA9TVsSAnZWagAAqBMQAJOXtFsHeKMXp6RmFdXb\n0Mioem9yFDWaixIYKKL04XibrexUUylWNcxixFlO05+Ex8XK0Opz3mLAysp+\nRU8LczqN+mKqJgC5KxjgvP6bJC6iWMvXJFlcYhNWT+AiULiPRItWoqnv2GZn\n0Z4JakJHYsijNDFl5LbUdIADApONggnC7zYWPwyI87c2DFybO2+oye1hlMRG\nmiAZxuOMDxq/Q+HJrEjjJHcMonLQE/CZdP4pMVC7CjCZp1Eozy2Q92tDAxUt\nFKRdmjUufYEu6i6imhkGOgrof34UAo7TCJ8bwgxGXljI/bsfRp2VNiZCFMlC\npzw0UIrFfORXrm6af4d3eHZuJAeirf3ZraXPcubFdJY5wlhAIVquJIAtNbuK\nG1enB3MG8qSMr0tjI98AbMEtzlhjBKs+pMSW2cl3W+Pcx8MwGoUi6+x3h+6b\nCOONH99lyON4J6fC79Qc1K2FBUhRsPxZvl6J1TGEYgnOG/IV3Ag8XX70wnQh\nbe7GkfmhXIWk+NJvND6L4OVUup2dNj0t7ZkuUlTOSR5YdHgqRorUDaa1kTSx\nRb8VJnTGxw9Wp51IzQZMjyiKZPewEKpRTcnkwitCXp1Uda4HiWfjgqjDgWAs\n+rIsceV8yRxudqrSVQc7u+i+f3uXn5Ca3UuyRb9q+KSR9YUGvJap/hDlgGng\nT7aT\r\n=bkeE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMS4NTTmNytTD9Va9SgHsHhnJduxCj3JY8rIUG/60FTgIhAJt+9xCjIcJZfEeR0tcsj9GyBM+crahqvQ3PA1qOhVfQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.f748ff2f.0_1621297361976_0.9686072090022544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.cc04657a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-ripple":"0.22.0-canary.cc04657a.0","@material/radio":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.1a8d06483.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NDCBflXsqbL8vZKce1BPlDJgjcC/XD+ZlmtSY2liZgvZ6fPUGxtii/YGQRrrmZvIKDc+JJG0rhzZOty5XHQy+A==","shasum":"3cf7ea09b4c6bfb8cb654c39c1fadd288235ca91","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.cc04657a.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxaDCRA9TVsSAnZWagAAjc8QAJgZeb6oHcYxRIGnX0L5\nfQ2JVQfTPdtQPov/zXLngipmEd+bBQ9850CUguNTPpwkAuFLRlJYfNCuQruR\ns4D7Y2p1u3Ld/0K6l9T2f6lVKVtoVzOz90yHHpmtZMIqsv0Dne9t4vDSa1zt\nHGiBafwyfyPHAotn98KnbAQn18kRhVy078cCkJ7mYKIKt4b+vm+tm+jwbSOn\ni90uVEC6EV9gXoIbUSOj6i9zVoqIgnEucDjeVYQiN6LAqtdjHy2PZX1MtDtl\nM6y//Z7XcUOvPMRohi4I6bL4k4soolbIJaaG3Kh77Yn5JWRjNMvpkPbO9rci\nqYlXnihjDWbId6qZLT2Wa0hmUPDbcGpHL0pTkz45MUeaGE7rcYGXd4sMfSTz\nja71aLEaRcFOjlv6rGcUNFr2T0UHb2JVLLVm2r0aCKmtR38yvSataLD5ONW9\nquL5kS9TShSKGbcS0XA+n09gvkST+ddUQbpChanZGNF1FVqM64gWkGZPDMpL\ntaxlywLx6HXXsCCMTygZlKVVVyUPQ9KCoTp3DjJphFUWum2QxKNqJvTgmBjl\nOTJ+IeY58rTXNLTe45HDIbSyds21aK9tLuD2/eeirx6MjBwBIl5YtQHXpyX+\nu7UvprOmnNtu+uExGYht1ga5FJCPgRo8YvT60/ASJxP1ZA4aMgIf9h8UekVg\njFvX\r\n=6uJD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ0BQgjINp3syFtclwiEFqvHjhUIN5eqDx/+TU2SWhoAIhAOimgn2hl80bWnRJv+B9+otOLlYuVFYHQ3c4v15rom8k"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.cc04657a.0_1621300867259_0.1928919653840082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.3a3114fa.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-ripple":"0.22.0-canary.3a3114fa.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kX2mYt8Db3X8w1OrMNkSTrrhlTbkt28kNn/jTVYD4DS5WrFEsN+ZMVdjVcWpzVltorOOErJWCA60GSBVkjBtSw==","shasum":"b6fb2d8c71e2223a8bcaa57092fe701ec48bc79c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.3a3114fa.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHpCRA9TVsSAnZWagAAE5kQAJOz0kKmQYBnk0W144IG\nNE4p3JBqVTlT5dqm2XCMwASL4y4OcvFXd153AQysARfJJlm8a6Zj/Wtd73dC\nkeCJe9TvbZ0GnxOsBEkhJbQGmZhTW2WYzCNj35MbTSy3nlRqqTxkGETjOmSt\n70wwzsYClgXi3I9YPwpuLEGSfZyp30EgzeqyU6yJbYk/ymZrUd021NDu0i2Y\nN/U9BCgiCJ01V2nVtrrGcQvCImXbj63bStJzi8dllsLInQiFAv3oIZifM1zR\nn4ErJex4rhj/mKQB0SllQLzTYx+TgYyXsQNv/KEfklgPO/BEW+ipCDo88BD7\n4tvqyXbBfimbYTf7/KgMvLkiuX8qfxUsSeUjvcIeui7Hqt+N2jgPw1zc+K+H\n2+LJQzTsuVBrbNjPGzwcByNyK1iv5HoIaTqck1vGWfeWzJFUlnwzu/AZBf5D\nxS5NSp93wWT3QyXt0AaNg73yYOkuJpp8zVVUaDp2P0jaLOpovHvp8a4qsxF6\n1/2g8YlyBplRdDmBeYY+fKcyyNc3IwvrN3ejqQiai7cuHR4bpJjLy7xuj3Mj\n8Nt6oFclp8NNodtJnkjkyIRyjcMxGMS5nJR5N19FKyPEOSAEBKgxs6l7Mj/y\nquam5nHeeQlzDhEv89mV++LPcpmcm4HQZ9vImvxW+0gdP+4ZSNpray0jDu5o\nLL7A\r\n=TaT+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCphaiaPi6RUIDA/EQFFFTP9Fe29zDOcG9hBqPkcE2cLgIhAMSH6meYprxcKYFNqW+p7203+e32n3LQPR3clWel7Vei"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.3a3114fa.0_1621467624812_0.1281762183058246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b46bdf83.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-ripple":"0.22.0-canary.b46bdf83.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qqa50AnCRfUvtMjVyej1xWMZh82EjAXOKRKFyVF141jJazBeidn1cR20H8hA5scDxPCbpS7lISYOQoG6QMFW0g==","shasum":"a2fa518cf049a59d77279a3a4a5bb0d28cec4b92","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b46bdf83.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCQCRA9TVsSAnZWagAALOUP/AnLqTAx13NNbJfMdT+C\nB9sozX+d0VadxIjEn0vRpwFGwSZ7vjIUjrv6mF+2geNROO+JJO0affUT32jA\nJdALekFNO718kf1hHP9XE2cOK7gHOVstO0eA/4bRDcO/IKO2pggvpZBfEYVX\nn6emuz/EfZr4XlMTjT/T+wZ7UnWJjKrKJnui0WM4XRMm9+BOsfuahq71WJ5N\n0L1lE7iZvvHphkS0x82BsftOWKWTeYkcx1m1GmBfQf1HsGzKyAUJjDYlOgxP\nwIzS8SMVrz+1PLjGrSj7MBjTanVKb7LFky+dnBT+Yg2Lmp0RsQdPE4e9JXuZ\n0jAQyCY8h6r32kvMv5Xum0+24eNuB6ZSgEKaUdVs5aKnhZFuAT8vqMvvaa5C\nSmOoyri/I3ShvQdc0/YFBWvV67SPVTmcRin5FJDRsBxKz9s/8SMQtVjCs/Gp\nLT3meb06EmeMc9SQ7bZh34YczDySmK6oeuBxPKWObcJAJRrhx6VeKcPOZXXQ\n5ltHO4kOeLwuKoy+ccZ4s0gY+8Q/Ke8NHnSbLznvNlCk5lBhtfVRjr42xgtG\nJc6N80rG1iiKZ8+RXPLtQC/68miDaRQIVRdctoOU6u/oGoRuNVWSABWl9uZW\nwnH90T3/h2a/sITHb/gCE3NvXZ0hkBnU6vTqZqZnGJKCrDTtCseLE1k4wCLr\niUXA\r\n=AH4m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4+PodLTBNKSX2e8QcmAfuX+6ZraUfGxotqpiH4u69SAiB+Lo/+FmS63TI3h6A5/eA1KEuOXVbtfQxQCkVvGDSj2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b46bdf83.0_1621475471764_0.2801809339994905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b401a081.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-ripple":"0.22.0-canary.b401a081.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1GIRzA75R3H8VtJbZRjqGp6URcy8N92JAs47m81z5NndDnX7Bj2KaXsJGFMa7alUE0PxMn03/vmY6PI/K/FO8g==","shasum":"de3cdb29b4ca1b87ef6541082587b881c2bfd6f1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b401a081.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDgCRA9TVsSAnZWagAAf/AP/i6LKIa8+39oY6todaf5\nCI6FxMH37FRwHV4XlXMhgJgzHyRwN9Vcm4fCQDfE91NL/gTUuX25GrfzxQWZ\nkKsJinxZYiSj3FBaRdaYifcPkGz8Ohd0ObwC8ZztLh0+WUqMQ/0zhN6YdcwK\nGQvbrqZXt2TpNDrYm2PEN9t/ZUd4HgseKdK1iUOUQ+hZcdwtIB3tk69B8VzG\nX0cJbAWKn4Q6H0LV6kxLaX/ClkKzJU4bRISaa9ntjBkChV2ojvzHhvFUHgfd\n/VEbmiExbwLSFNY/0oTkN+Gczmw8u1nEGIYrqhlZhc+XXD2s0tlFeBMVpfxV\nXF4DdrtaNDp3kk0ZBSNhs8s4EtmEUxGG3z1EuOW7d31/hubPdOw2vLlbFFqb\ne8SCdd3Qh8Nj8g+kmpBNA2tj6dvE5XpnU9Xxp3xlogSk9OOwGuFG5Zze1CvD\nKSGy2Fl089ipF5/kqbEQW6mg4n0O1v0NkMcchpvC3QsZJ3k9rfkmuQYTIZ6c\n1AkFAcn40qLKVfOqBF8vFTnxVtolUHfzqkv4UgV/Pw8vHjNYSPxaxRc0ikEp\nUrPEhHDIUMhJ6vYLQ4uVEL1KFRUGrlz6BYLjDCCxA+iPvhM4qXwIcDov3fFc\nm75Ps/KvVMWL/mKKH4F1LRlzMGYvg+YdlBUp4ZQRkCYLAw0nGZfiZcGH00H0\n0nHK\r\n=0ZbV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5qp0HpmJYWN4FI6B/GkUx2l42/sxjoS8x4uoj7cELGgIgcSemJKH2lPr2ySKDZ4cydDER1/YM5MgiomFGBcZNMns="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b401a081.0_1621639392168_0.6082286295115351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.012c8dc0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-ripple":"0.22.0-canary.012c8dc0.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zgXVHfYOyt1jt7QHye8rEvxKGtPMH2Nf/H3Q0bmmw8P2OwE7vaYUUWkttz7xBPM7jkOv6k7nLoMnHv0flwcxWw==","shasum":"4de992cdecb2b30cc10c0873cf48b9c204e5c127","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.012c8dc0.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1lCRA9TVsSAnZWagAAx7EQAIdQShdLTMUp3gXCBB6+\n3JIC+lrNlj48sAzucdsgOlMBFWlFF+pKHrr7S1Q7sZFX2svi1XDmHdbAf5ml\n3VkQ2OnJ6lJGQ48hh2AyUGfZ9pBst2U5njf8SZWDcHEdBZOSgNpM6mwrhyTb\ngrJc2Ms2V7qVu4NeWQA80NcoIzq1E76Xk+br5D6r0ODxox7qMbgHRB9MXn7Z\nIZEMrCZy3AyjlFrKwe+LcWlVK7WCK2vl2bhGpf9hF9cnzpR+/yfHwimMwwG6\nQKhH6lmesPlpJ+yuKV/RZ9N6b02+AdTIXoLmDcs1s5NEFd7yiFb7fJOHHds4\ne+EiOVUBgt1aoyoeHu31fitjweuaUbufULsHNtxImR4DbkZoQ2c3cUUPrXsP\nZBLJupjishFAP6AB9vSSRPzJxPGzJeZJNsH2GsARjW5kcpEsKrM3UCY+4UaW\n1tug39Ow4RsyIyPj8PlYKyPIun4DjFuv5t0ybnP+9pUY0URu0zRIdjgeBcq+\nAwkFO8aEMiF8DX8ipnH7v+eyHNMOmEuKt4xml3wiYJNBBhPb+j0OJ1u5KFoS\nRMrMooAkAkdaPUNrB+9o9xWPHQx4JuUa9kCD8a3uvpbJOWWWlJxN0ohXrEeO\n1kbqHLXNV9AF04S5R3ctLR+Na0zYZHcErhQAJW3zuFUWMB6t+Lghs5nGtWU2\nErGh\r\n=18yp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHoIdWL7Ko/DI0RXGK+1cCKRlHHb65Rz+8Vlz+EPXG/4AiEAwu/s/wruKEArGCKi5aNEVOWJf8BRKiRscDUqeQYfhro="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.012c8dc0.0_1621642596526_0.3018066468945315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.e01a1731.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-ripple":"0.22.0-canary.e01a1731.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cyjXWN3Gp5PFTvgtpydM68j1UJ7Z9wzppGK1CuLP80QYqJ8l/aRAGqpvQjkap+18Zq/31gDp0KUYUtqw+zqQxw==","shasum":"ac1687311f7cf052d03cad1ee13df7ef297bb4fc","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.e01a1731.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq840CRA9TVsSAnZWagAA6lYQAJkE3SJY0fixk0ujOxui\nw6CPVosNdqkmJY4w2n0Pse+ZhTo6gvqSOA/D8vL7m1Nhc93eerVCaaWsoyzZ\n3Kw1YqL1UKIG+n1JSms5mscABOm9F8LHIdowDjDGwYak78yMbvmRlw+52bbX\nDZct8ZREsepDH/J0xTUvA7k3QjJCESAxm+eKcET84HBeMFXfXo3qWc2jc5ei\nI9uILO+9JqSGq6vtWRxLq+btCiU6eEupijGnyo59nHOIsPi2UY6a/eE8CNE3\nLo1gPxUXZPq9KQZKWgMnwkdaBneWSKpx7iRJN20Xdn64ZVRG59GKO0j5xG7t\nDi25b6R5PH+HckrnE3p1kn5fbNR5zQ2zRa6LVe3ghfcVwuOzrGqpR3PKOqRv\npOYphvkgpAHVD7WTyOhfW52ZVLhrpJGPOQ+Vrfnq48U8v704HxWdT9I8P4SX\nHusK7RiqJdfd6+ah28MVXPTUj6XcoY1GcuujpZIy+NU0u42dzOEOmGRRbRK5\nx4wgKmzAUXTCPmqZ2aipx7KWpo9fI1Vs+7DIeTnnhXjQLN3c3+7A9PYMz4ui\n0Gi79ZuB28n/e9KighXW3QLpSQGVW1GAu2cItz99c+IacYh5uuqCIMz8xTQe\nGq0G03x8y481/VoCGwQbFpUvAUSJhyy7HZUr4fCyUoRkkloGh1tFnZoMpn+J\nF31y\r\n=qn14\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTlz1lzKgE/f2rev5KGHrXjrzZ1HtCfbaWX/kGksM9zAiBADcNYMaZt7Xk6wmAj3imdtUjLXaPKNP8smwNHKAjVdQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.e01a1731.0_1621872180377_0.7029321347895321"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.59174b9f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-ripple":"0.22.0-canary.59174b9f.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7MhsCxVWOBiaosgIUdSrCJt9G5L3aVlIqQpiPpq/9rShM2mc+m1EtyHThEmM491QCffWfMbJkbT33HGhnCcOqQ==","shasum":"6e8c6b8965acea5f4b6f8a42d6204741669a4e35","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.59174b9f.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTu0CRA9TVsSAnZWagAA1QsP/Rjb20pTt4CEUy5VRbL3\neHNK0+ypQH72QvyXCbPIWdDQYWBbTlFOScsdNhLQ8b1R7ta5aBZ4MKMDbgFc\n9YC6bv6lBgT009QzOz1UYjhwEDuVdzj1tIRrLkavHlfIs1JxO1SqFdmdqhYg\nFMOW8HacRxeiuPfsTf0g2cALE2cb5cK0ebfg5YjNK5WAbQn3B6n2wGdKbnFy\ngcD/RH1z5VmWrqBw21PxfNXzZWNw62jBjuHlw8OxV1xr4u/haLBPIhnDNCu/\nYIjgsgYyZbi3wRZderxPxA5T6jZDCkhzUtLL3KlGQbP78g4CVw1acSdztiea\nkEFlfQGQhOXS+3jNsOKSjteey6NS7Vd4mMlPubnjzCYIVdjSnCaiJwvkpr1M\nZQyovwaBuHKHZkX86Zgkvo0c3w68K6A9sg3qzafvQwnBjjx/QtipGBeplYve\nB1fRovE0xwv99gy6tRGZctFDLg3gGJC5a0eD1x1Q+t792G4Roaz/Pdc2ga2r\nuXyDVc2tgOASBB4TigxcukRDYqmRI5r4/w5o1B14KOI01ksTF7Xe3iZJzQPM\nRW0YFqfvcBBUb8qiclx61Fb7nEfn1WzU63n0W7aJeH+v6VkWXxAKgU9yKq6X\ny/ptRayUrai2USC6eaoLlWAGs37E4JJ3/GDYU7qnecI7ejlI3enjxiGcgpn9\nCTsR\r\n=a5Xz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEC1FG2du/iL45P+Q29V4W3AKOcxvlvorgaSQyB2cgOAiBv3sLAmZ/PYAKdwSeVJ56b7eoiXdyf8wUVfYAhLhONsw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.59174b9f.0_1621965747824_0.23060925875601512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-ripple":"0.22.0-canary.c96cb2e0.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kLWqsI9n6tBIQH++setWPU54hrqS7pfC2wGGitO992osmNMd4j7hlqOZvK9JFeLU7eWk22K6BCi/CJPYyANngg==","shasum":"28eca92961166def3d3aef60bc468ef5b3fadbe3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.c96cb2e0.0.tgz","fileCount":18,"unpackedSize":95391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwhCRA9TVsSAnZWagAAypAP/13aTQ7x+CIa1lqCvJjG\nV8zDt/kgE6pW5EgyF0Exsxvfkfuwf2H7Bx8yFvFTMjbBFTwVzO7RC5ehMvgg\nI8o1E3V3Kxy9y73x2QvnPl50x+3E48OMnBPzPfGLCWkscR2iJ3KzzTv4nzGb\nW+uVnF5mB8v6RVAi3hkFRFFzHmkXLkuPboIvais7QQvV7IKUfXje4OOydpfW\nSVnBhV3L9k9FjGnMGKa2cIAkYruIraT0tXBOFrccGgweTxe83VKl/Js2WTaB\nnbtJvYFlvbxhj6eOAfb1pqXHAH1aNd9tv273gLt01KhrSkyA60woPZQNkTWO\n+MpBrTJFWm6fguzwSsCwpUYrHzmH+tKOLqd1pkiy/k7ZGwTHuUOV9RmC84u5\nysOHaNvYL/OKELiInFMIFvGqp9wDJcM50bgNtXz7WRJY20sju5QBzoGX3xJI\nuF+UJJgaFn1QcgQFK95VI176ctmyirTkfu5oiF+uNN7VBAwxvynTG8I8LwqQ\n+yTxAUi6kZFUcEU/ZADcesea/+q6SoLKh+rMIh1dCY9BhhBkJqPcnUx46HJh\nQ+iXFZU/H4xlR5/sAIAqzAu4k5+48Jh6Srmrdnr1rZBICa4uVjvpcn+WLjIA\nf/Z66Mgsdl1El0BfFL2Gzs17Ki2RwKaxI7XUv5tnvDcHfdkz1SbSGaNNnhIX\nHb/M\r\n=3zJX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNU94E2qFr2FexH7Iv59QsMTVxVE3kRGnLqNrcTNvQjAiEA0u1SG6mXrsyauBNXCb916cRir/vT7GHZLpGwfIFXR3g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.c96cb2e0.0_1621969953315_0.6329128643933335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b9b0e330.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-ripple":"0.22.0-canary.b9b0e330.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c2I8BTX1NpeBX+jcNdNA4fIc78m3D/h/EDthJBnMmieuqhFuUfpHKO3VdpNH1+7debTs+QAv/xS5ZaREVt31oA==","shasum":"22b1f6ab65f50f042441a74375b7e258c42ca7da","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b9b0e330.0.tgz","fileCount":18,"unpackedSize":95387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWV1CRA9TVsSAnZWagAAc4QP/ilf/1e18LuLWEyLmYZn\n+ASsu57oXv/EZtpdZAhfAytxc9bt28uGXhN+eh1S7blemr7dGHIvr8X4PMS9\nolCLbqWsNUNmLOlmjZl5SU01OCwUzvXS0+IBod7V26r7tCpZFrB4tRaubRsr\nD0fguT+gLLNB41GkvNIIMfvXQOp/hjX5gOK2vh9Lcw6nn5auzIahtj/TWrI0\nsywBx1aNwQlpvuwYdcdNOuJjtT80hnCR8rhGYCjcL16YPq88IubBzS/HHFdh\n5D/j0L+rFGfWlprsXwNJpUmcPxRSfC+VSA2z+pTzHl2lL32BvraBOAjkhY8n\n0jatjbghK+6dGuvZn10prFgnOMHQL/YUjl35rS2rcus9b7Z/INb/xrPDN29f\nkyBD/F2bB4t00qd3km4kMozvkdAYr5PR2qPEdzLm7kfp4Dczy0KpwYxIhp8D\nF/DxzCx7k+K/8MDYoY3u8DnS7hY9PcjA+c2Kyna3zLccciASX+O78U/m/h5D\nEnmWaUxx2UIb9kANcggkBG8T/tjFpBbfe1q58RWiksx6qlGpLNddg6H4ULBK\nh7wkr0NqHbjfONrSK1bv5PufgriILZ2LbSbYvZRazDFVTZQBOguzY7HL68lB\njL4jC2KvQJzDPuHnFweKU0U3W5mKjOATLrloYHuqVoF293P9L9pXGF3LkKrp\nh+0j\r\n=IbHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1n8/KjTPIDVOBN/gJpiAIpH5H1W3qvuFRAh+QSdN5lgIgTZvbqq/lovU1wikZ72gHov5NpGu1XDQUMDU2RWb1A74="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b9b0e330.0_1621976436671_0.34560164513485203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.ea2a8063.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-ripple":"0.22.0-canary.ea2a8063.0","@material/radio":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4bb5eea2b.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IfeOPDIY33tMy6Pg2mZUhkXZIeX7d63Byzqm5Wk1cDKitMimWKklVPgaDpuVx6IheUpsscw5PSjQK6wiT/zsNg==","shasum":"804a27bd0af0cad7ecbd3693433c3d189e325853","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.ea2a8063.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWagCRA9TVsSAnZWagAAq/EQAKKUPfad9hIcopA0zpOj\nAu0P1joYSV7KFfHnhBpNGVmOI0nEnUnFVwQUjFuKL0d/ehnNJh/PpFBAXNW2\nCY6RdrMkyqGCeFZ6tG6xGJJYLdIQ2NWdO4kK1kHQD9aA1pRpfp6n/zBMyoST\na/wPTcMFf0uPEE+iaU6KVDhL6Kp5nqJfONUrtfbW/bWGKvQNU1CeACqKgGSC\nSeZlpyFe1XQtKPF4wQp1n6Rqq8+eNyHzUftR+ovVa8NHMQwLAzvpjm7X5w0R\nKyBH//fF2MwBFMUAGiFgjyB1CzGWA0kQlSLfMKJhKU0noO9/bjw4RLqFI0ih\nsg/fra49A4nJrcUgsqEQB84pkMQS+w2wCqvQPfM5FRe+GBZg1fvCbW6RVrfJ\nPKcCZ00mlXgA4pHLrz0nA2DoxNVVDurNZ6nCtWKN65MrgdNBYzi49qcn4F8U\nLgeKgOHT+rdEKMCEdvWw5Cb8wumGsx/g8hmKAd6yIPjMo0B1vu+saNVvIf3W\nm90zWcrR9gUt+3PlUOVBUEFo/8rvpokzqk0OV60QOVMRN18ShDzUSwRoiaF5\nF73X71FONIU7sYwG/nyit2ezjMlbBSW2VZh/1R/YELnJAKFD4vFGOMiGGLaB\n+YSzGf+dYh07YKJQYdf0xsCZPZGD0dElUVFjApG4/xUlgkE2xtDIrIpKGUgr\n4z6J\r\n=Tg19\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGoPBSg7WdnuM3OhRxMb+Nw9zw7b7xtHxRQTauQ3d/TcAiAaCdNEtrzF3ji7LZ+XHSREiEISpEbuzzbGfmr88MDHxw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.ea2a8063.0_1621976736129_0.9182169535174918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.60cd9178.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-ripple":"0.22.0-canary.60cd9178.0","@material/radio":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.fadab3372.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4cc1Ct8OgkjIvX4JyAILh60eHXL1JMrqVWk4a/tG3zVFRLY2WDNUsyn5n3EizMxqnK1qVuUsP0qmXWzNRVZftw==","shasum":"200ff3e3f81093da3a1305ee3d0efeb534422e82","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.60cd9178.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTHCRA9TVsSAnZWagAA5c8P/jj2E3CgM2aANjqVuz/d\nLuXjV3Y5rQQEernw1t1fwrFae6lT5J462+MVWfMOFy3U8E8lCirtlPd2Euby\niXGFZaJp8wIkPkW+C3lRurSEFbMt8SsCLQjoC38Lt3p2yr7iprOJQ7QUfqeQ\n2TOAK8uvNwmrlfE7K1mF459i0EfCnCX5/dKqptlJriyWlG0K4++cwm71MmPN\nwGJ1RfUbW+KkQWTvVSZ+cgP+2P0up2D6lnn2pOyCCRSRL3inKw4da1liyGtr\nBaESFI6CYBHsr1it/icQGQz+nLvTMn72MESEdb9TDY6H9f5TnNxcycI4p+wY\nPBJ2ecVJuOgL7bA5qwNo6rOnWBu9opvYxFqKPbOJeRMAlS3H/Uh2yzpMDuBi\n11313QiYQ5tKTsJDyPl0g1s5qxq7q7CMO97HE03y7+jxN8jWhmZuXJ07ca1X\nWq6maEgOwajZj2AYSg3Ju924rHOZklpzM9OYBiIy7PByhaWk/aV6f6PhOu8q\n34XMFTELPAdLMZkv5PKAky2ystkk73ztJrj7icPRo0BMwWsBeeIsP/PwrwDC\nVAKk4neXIaXQsWQmHB8wo+6GhfD6Z/Dk5K5h6l9B/RoJIt1w13Sngkf/X7bB\nfn9LMXZb09BjlNokH23fnulmtCquyfKfee97N0EtmADqTEiJF48BgVvdPBxI\n1QI7\r\n=JBhD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICX9NVBvMKp2oOzltrB8JDw5U3Sc/8WdOp25M3zD9ozZAiBtl8/PveSXKBJ4Slnugw0WiXJbERgLzJDbYYZlJbNvoQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.60cd9178.0_1621984454627_0.05894312349278641"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-ripple":"0.22.0-canary.2e2c75f2.0","@material/radio":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.fadab3372.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rFxFAFshZh8/EbFm+kCKqe7KRHCXLNY4h5KQ1k3kpzZG7VA/AHW+HnlLjFIPKL99R1Mh3juBX1Anel2aKGU5zQ==","shasum":"188e5dd8a806ad188d92232b7c942005385b28a5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.2e2c75f2.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZIzCRA9TVsSAnZWagAA9ecP/RQDWoY6m0leSlwLzKfx\nktz8Uai7XeD4daO3cI77n1wbNeYqFQqUuBwL6hms67C0hpN/XYMT5ZHZejmK\nH5oi1Ww9H9JVB11cXXr9xLLzIyktiCN/EiCuRThdOluWmxFkC/LSohfKArxx\nUi6UcKzHSD80eMGyd9tyZXRDU/y2uk0WYAIZ9g2yFCgQPoFbwKuWpb9GNB/6\nO9fcmO5fySwZb7sMGtm4O8tDevN5PYAYJM80yIF28LwRAWqNWdRUgVlWB4zY\nslcE6Yqi8ITrQlpeCD5lOYDrxnaPmdTKd/e6Y7gekXaDL4/Ck5hx0/IT9RK4\nKWGtRortCY/GgODGYVqCbh1w7BWNwcmii4+0cMlZTNbGFDwKyTeduV9/vN6H\nBFCYMvXZQMQPXSJPOOSReKAxR2CK1Sdhk8Y3GqziJgiZo5BtJ7tIX3olz2if\nmiaIEMUhgbfHAd7Vl3MoydkLj9EonyMpKAEnvVXHq4MSapukP37/lS6x8I+j\nJ7pKj6Y8BUQZUYZ2jGxnemy/XYzXqCRVsGgJBoc1VND/wui1nDOGfzDijPtu\ntGxNHa2H7/L5h43uqnFeP6lFwMeZH3h/9diF9GKjDu1DubEOwr9PO/ay11Z3\nFdTmevE5G0ENMF6W0OrY1RbsiYC/tzb+/LX2H6lZvvgZ1prRrTMwXZJATZ6h\nAffe\r\n=PU71\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx16TaOhgqlA/f0bZptouCT5djzzBFdCEUNQlNmzpI0QIhAN0JrSWfaACvR0+sd8ZeiPtKqZ8aUTqojurDS5GZPZPv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.2e2c75f2.0_1621987890506_0.7683016818311543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b99c77d5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-ripple":"0.22.0-canary.b99c77d5.0","@material/radio":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/LTABIsbEbQ0NnMJhbMiSJgmoUE0d4A584umDzjG94IwKjUMoC+7WQFgWPjTyty01DFIh0xaUXKyT+2vwB7QNQ==","shasum":"68f4636a2fcae9c5d424bfb49bc00cd48f3b479d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b99c77d5.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3bCRA9TVsSAnZWagAAungQAImOH5UwfyOWO2BxFWPC\n8+yPGUB7SWXz9RPklSUAMYdn3BjpiskTGa/mE308bbn6NfC28eKFTQPTxidn\nkCzXa+dH8RngbmFmThL7TTTRzlODJb/IQKaYwz9px3JUV0p+opx9w0GUQXt2\noXsvhle8ArwS4jPCRZbQnFIumdc0qD7kLtYsIwIpBZCTlItkiZGlaxXxwQxA\n9Ywfx1qHR9hIikBo1HQb9Fv/uFP8XvWykxLL0jh4LHic9UwM8iusX72sBvIy\nfU62cHEyw4pLMZ68xN4XbHRFp+Ll2jF4rSxK14dLt83lZZ8yPEec2UGZx49n\nfmjpTWdit97Zq3ggDmVm6QJlTgpp98g6/CPZQsFN6kp61U2pcE0f1hyUK/tG\nDPNxUT4jYu9siiQwJ09g83hEsKwObCi5Xs1XERLOpnLpxiyiYL+skTIBRdxo\nCne3FX+30QWaGklYDXBB97+7+EhDL2WNxikAu7O3xJwuRX2FC1ZIBwXBJpTv\n2BvAeZrZRDgQst2M786gOwD+nuvMWhlIb8UwnmNHjy17hlXyfXvYAVEkYJ9n\nXxQw3v7CZ7lptHaUprsqk9eHfT84EdzjnqUEh9FkVPndRDCwto/lEHVMk32Z\nbSdOwt0DbtOJqBXiOCuOcWsboDlo2c33ff+magOOTenfy8fFwqPZC7AXrpPd\nPlbm\r\n=B5/8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6Ee26QVijw/dQQ6gsVBON+9qUtBo1BQukGEY9rvVBfAiEA3hdwmxqNYQpS7aYihtQNKQvV2AjqooO5c2qxpUaglbA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b99c77d5.0_1622056411551_0.015894416871685246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.0de82c12.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-ripple":"0.22.0-canary.0de82c12.0","@material/radio":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hjqwiS0AESeP+DJl6yLdxYSEuHujX7jd6uPbDmOMhXo4AQfdwtqBcz3pyC99Q7n/Qt4hC9hNNYdCWfc5OwjD4Q==","shasum":"4d0e38fd373b7dade505d6eae2596db0145e6b23","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.0de82c12.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4nCRA9TVsSAnZWagAAS1QP/iEpGzsGyPULlT1WrG6n\nsi2cuMXU0TXNseAR6p9oEHF7O4dHJTJJJIcLMTqOIB0GDa6vZbSgIYyp2fse\nJ19MftP6v8XfLPQxcWb1i7zUKgNwFeS531urXdoMtWhPzasE0xkitp7LBIRr\nHih/T+AbGA9zDVlo6DWNTOGGeDuaCKNi66SgN9ZRupCx6mD4Q1m3hcVxBGWq\nK6wQAVlJtthDmst8zPRRUMJwM9Bt7gJvfe86ZA2mf8oCuACKWPn2ibgI/dox\nt2EJPZ9ExEhvSG4EMzYhG49T7kHvMgYgf+Exk/zWqElNGyYPlBSIPWfttqQ+\n7/7AQHv/cSuda4tiAILwI7TGUv9bVlw6HUVEFWyeMWxvqOHBY2WKjrEYr2j2\nfh06ZYLUplU+qTUoNEihMguPB7fApF+GElwfP5TP9U9B1xXFPMHg7EgrLMaF\n40RaF/xIZAhXFATM85ETC+W/ywwzDrfmwhPnuxKoq3KNQifvBU5PqGRjAxaF\ni4C34cqP7BwpOlScYs4AL3/ZWUPKWL90Bg0cbNzg1jplUBMhkufs7exqe+4x\naIO07rqZXvo2Xw7sSN/2kW72UtNfw1Ka6fQ4OUyFeUt0CuCz5HGSYb9847Gy\nrVP/BZXZjifpRyDn6WpP7DWN9rwp5WpA8L/NB9tZfqyesA5WZfR1XcSyX0Ku\nPn5V\r\n=j5+e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSwiy2ZUXNxEi0RPEurlGzayiHLqzqkQD1voG+JaJbYwIgYc8GZKbJmOIst81St9KKh7889Z4x3VAR5dSYtUgA+Ns="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.0de82c12.0_1622064678567_0.6684986191418765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.227a4614.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-ripple":"0.22.0-canary.227a4614.0","@material/radio":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ec31ae1ed.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BAo3fYLGaXw8o7hppFxVuSNDJ24P0zx07dd+u2cUh0fRqh3D+YWCHbiWNSakBkLvIASL0DOkKOsd4Grp1zZwPw==","shasum":"024bbd3a9a5a7b4d477f5f50c0434fc3cbebb98f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.227a4614.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LOCRA9TVsSAnZWagAAzUwP/18nEUSPafimQyT5ZLPg\n1PzQ4TCUhnZmzz5PObN7HN5vlhm3E92Lq1iKIprVtuQpTFfkQvZtfKESFbrh\nmer7rwTPD/2w/m4TPAMA32bqaopT67q4A94XsBkjrkOLHGsrCXoupUTtfSZ+\nsSirfWCrVGvkdQWbvqE1NwmZr8x1yPtunootRMiewzVp5h7DKTTEH5IZSAJr\nbO0J6Fxup4lgiF1Kzy+bOu+moK6gJWqjzrSzeZEI0d57dWx0GHdRCEVw5KSm\nhLu+2WlJVX3IZfwNOzbgy9Y2j3fqgGXrAAjOqs94uqlk70JVMEhfaZOYiSQA\nI9KlPq2B7RtEyyEepxQZWoBii6bkrZjeApcZNd0aY63j4UsTN2urVCq0F12X\nyKF45y5KkmQ87+gRLJDP2yUgFEqLJiANBq1zlY2uvHpDeKyMFoupA7pRqMgn\n3XsGIuIWKzf9kftf2G1xdi2I6ZwJzNOj+hOxAPwodL5eEDCmuPlH8GQtbAv4\nKShAoeI64SetmLSeP8AUjXm/51SUClXTMSB9lZPs6JjTExOGMd9aYSkaRiRW\nA2XnCF5ypdbEOM4L4zpLxH4poOVWjwNGhTFjUTpAueabiKkxmorptOU0QcRH\nUzqff43BCveV2WrnUHt8y6buoLPdAK0/bEaCfFSqdGL1vnuTYFAFUSr561sY\nawf1\r\n=k8W/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxmDGzm1xpVRPBZ6IgHEiAfxRKwooy38hJGLMUa1kUgAiEAwioPWj8lkJRs9S5qpCL/n585BxPz3Xqwp3fxqEDdtKM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.227a4614.0_1622131405707_0.5759506128685001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b3d21d31.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-ripple":"0.22.0-canary.b3d21d31.0","@material/radio":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8530d3514.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zMYMoOjBg1CHD9Cz8yrpGos0UXJAP8LAgabojp4Ct93sa4ml/gqb9NOZJHGAWKCEo112kFERarrlmScYOcJo4A==","shasum":"7921d5d2269e342513db9e32f79578cb0d6f82b3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b3d21d31.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jKCRA9TVsSAnZWagAArlYQAIRBF1NBHMEhnFOB3BUj\n9oTtBWqL8pwjaiJcK7pq/CI7OeG5vlvYHJfhclQJzklVb9t/hJRIfbgVFxQT\n/EthJ0dcrWB5RlStZEAcjJHS/9V8PZcNEl4hWU7C5+W6teFNFAbI9TQgJTmL\n3fwywdeVmoH1/ALgcw2536i13dDxbRH1iM+DVGewMcrxncBpSXh0u3ZiZk7L\nprkDSMKWxdKJySVmAUXSzIkwpYObGup/D5OMAQtI32LxIB5nzGhPIfLzNb6l\niz0j6sQ78FuOZkTSHXfLum+8oUSZMDpmiDLgaoWkN1Uo4nNVtBJI4G541hpn\n8jjbJvF2TgixE41E6ezB/zNggk/J2nGYoJTjPByhPpZO+mlYuad97WDDI6Xj\ndBbd3zrr2mYeU+ccXG9bB5P6bsc2M34dKdcOw5qfNinmdanEnnO6tT8L2zCb\nn8P8pkSQX6UeW5CpSLB/h00DhfSZfRZiRSxTy8sfcbtNd3yWK7RiiiRwQp2P\n+WIVnSl07q7T7f0qK57/+c2RI/HbhAOF/xiw7cbZudw09MdpKAhYJULAg48G\n9btw8fW8c+7+fwy7clqZ/fJTrCRBw36eePn8CI0iKGrsO+a2bv8D3r+ZPHJX\nOIVhpk82m54pYOvzbTBP29WnSzOzrZ9TrIU7m458zRC+aPM1semWdjkc9Una\nQ+H7\r\n=qy0U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFriQNs2V0Q+sCle+QtzM6gR/F1EQCCNW89ObOSYCXUnAiAkemWj2hejUcJtke48E+zG8ZQk6MwT8X9Bx1rmTjEI8A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b3d21d31.0_1622141129742_0.12737770847371954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.288c33ec.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-ripple":"0.22.0-canary.288c33ec.0","@material/radio":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.00b5899dc.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t6YaOGyZRP1odxcrzrrd/q+Y8tniX0hzGn+ALlCzVD1OBBMtrIaHzWEdgGon4rMjLfxDUkTCViVhyk+YkouchA==","shasum":"186b41907ae56af7f186db42d2de36465491495c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.288c33ec.0.tgz","fileCount":18,"unpackedSize":95403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9z+CRA9TVsSAnZWagAALngP/i2XWPw3XKG5p2lijeba\nW9uJbxX5niC/qPH11AxDH63x6/ynhQ4+Ion66z3rROEXcc2Hc7jCpX0R7c3C\nsdBsZ3Nq+yexQpBaK9QqbkdRTQCKBKuHyyWDDERjbA59iDERHpZlnLM39O+D\nnIoHmLncw/IpV2LfLMWiTd4MW5ZsH5GYlb5yrYbTOXzRPmYQ454qYJRC+S5W\n7hAe6rv7qIukagRl0ZS7/ErrGSNHgheqdWGZjVmTk4ZMathQnYoTPDY65oMY\nXUT0Z/JFADe/3h8cV3ulmR10W5tkDNqilhE+4paBnNOwrIUggormQT3r7KIx\npCjGY70efGClDduma1Lv74XwE5D2WmyUPw9uwhQmRftoQ2O2L00yWIbnMjDn\n30JYndt9BbflWKqBcu9lbE/JPVaWPAX/0Hk8iABdUo6KVVJafZAOb3oQPSZ5\nHcBcni+v6PBKkKm2QOi4/RE+rRR3ZG8AMIHbTLBXQLIouPySNipjL7oY7tSm\nckrytQ2mRFkhSTZ4fTuC2QIGrvF/sKqrSKqMmNq9XtFzr1oYarEDMuQX5pPb\nblNrwSJE36gm2K87mcLeQ+SUSlz4bp/l0Z0BuVBnlSAi1AJgQz+J0AjHssmm\njNh/KSXIQR0gmFE24UeAxD9QcnC3mG+ZR8jqnX1pHv1Wr/xhGSI/M8O5md78\n9oN5\r\n=uwGq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSaXmdZYP96A3ucy17WLpJnTI/o2R8p2K+Iuo7m4gAfwIhAJGtIdVyjuegyAfRocuUqoCgSkikEomZDGgVxZ5jyQ/A"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.288c33ec.0_1622662397991_0.3118255647671011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-ripple":"0.22.0-canary.7eb7ccb0.0","@material/radio":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Uxnsg/s6EiNGQWk5pFBP8aTuKiqdYsk8DaksqgnQJb6rFF0gGLiEAzWc/yYT52O2/XyVf0cTGeAU1SuEAWP6hQ==","shasum":"3a551e3bf7cdf8279113493826d283330621a040","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":18,"unpackedSize":95789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOmCRA9TVsSAnZWagAAGKcQAIVqTI9F7lE3qA0ue1Xu\ngl+M0syNGsMurRvU6zGuoTdUBDsNYT04KAyaQpkwPo334YcvzAAA53AnTLL1\n5noVguRqp7lqB73NDQ/ts2/vZZzq+CWkTWJ/Q3nCw78Y20S7NypQRLQBrCbf\nliy/ojOkG2UqQwhgnkibMlioGFn6pMwNmnIeiRIMpZ0rzPW66pr6JA/vbwhe\nL+Nq0vZ7NWLauIovFhKsfk5ygUjHXNZaahMRnbGTlhUUeoFf9WMeZFVqdFKR\nt/ig6Rc5fdzRqXc7WzOOzX+YUItGcHexyoYKBeGt+iDu2DdEAFeecmRf3ZbH\n10AvAS5qaTsZPxZD6lCRgj2/euSaMAcyrJtGpY/3OjIIHiFZgXbnskxRQnPU\nZ3xbPWlu9DNzp5rhmYqswFlxPc23pgfGVfmwYmx6Cn1n/SdRL70pT1MIRjOG\n1IRimCGt/0Qwf9M73IMWlmCUR/Aux/HSzRnw8tIloDcOyr2aQiShFED4MmLV\nb59p3rZpFkG2ZxR57jfWz9XX5Hl+niL9jWzW/KVqyQkfwVxl2ZJ2zGthBWt7\nrcllk/jjOJGd/rLNrqL18/dZHenZJsI6WqGmjE0+AP1OvHpCAGtBxSuabIzf\na7MYroyZ+T1nFlO/yMKeWWJzVUH70LkIAAQBFW3g1SgNEGxyMFF5zyocF+YR\nsj3z\r\n=NxI0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiTddHI1LmeNqKYwdVkMuCrBzWNTDa66BCenyz3LQQxgIhAN18qzzV0E23EeCAvwctoIEW/JOcBir6etl4KqINHByw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.7eb7ccb0.0_1622750118513_0.3625277958319686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.7fcc0726.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-ripple":"0.22.0-canary.7fcc0726.0","@material/radio":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PYfwxhlgVv3L6Al5jnrm4iKCrYMpx/D1Xzri51RdBT58GWHj+20vQDn+r7uDd1prnc8og4Y+3GN+KoiPSX1Qjw==","shasum":"fb4ffbfbf39da16971ecbc91b117d6f5ac429d44","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.7fcc0726.0.tgz","fileCount":18,"unpackedSize":98014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2zCRA9TVsSAnZWagAAT9UP+gJqGelc0zvqlzx7zHSv\nnEFeCeBbu6fcawSHN7T4jI4Cw+7nuTsM081w4cJEzOLRnJCSU0y9Aidmqd1k\nNsLbKJRb+HT1NqW0EfFfOADohJt6o1GYrHq5qm/yjm1vB9jEK9vSqxPYLbOX\n7XaG5xtRqo5Yzh28uRe72vwi9QWdaUh8S4dJ94UODEa/S1M8vEFBH9p5Db68\nr+w7DUiqNRHNAeXQJXtYI48EPvs5jxnkxGKDffRoeSAYzVfSGPPW8eMS70L8\n3ze9NPMHHQGQ8z4KNFqD4QBEsOuoXrcLylBNTdUXSk+wa+w/qh2FmwCwXKGF\nY4lXuvnEgC4cJ89PLEZusrls/MqxnK8EAdK+cHgISCCZyW424m7MahzeduCc\n2DFGntfT948Nmyti1G9XE4mCCTBBxS+3dcySHIRL1v5sQc/yFZCuP6qhIOLB\nNXPycnB1qxp63cNHjPzMPu4AB5Y8xCg4CsFYbdTbLu3JbBiXFu1X6nSdCTP5\nYWEsEGAeiMe1OehhA4uFE1SEEh4xbFK97f8CDeASa8BH97XzaAt2ArBIA3bw\nkYD9uoRAPKSsAX6o4G4i0mLNjANF8oSyVvLtN/C1Oyf9ZqkPCHABJhexrq1Y\nVyQafqlFX62HZ0G9VHVKRRfVDe15Dev13HMVbFsZ8hrMq/so6jNNEW+tVeAm\nuAa+\r\n=2tzw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD78vYUZuFp956Jj7QPU18c4ixamWh4LSiAIKrk2/uo0AIgHOoczv1aem5YAQbd3AVLkp7uZ4icfEPya23VB/EY/oQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.7fcc0726.0_1623113139587_0.6038180695682427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.220a4e5e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-ripple":"0.22.0-canary.220a4e5e.0","@material/radio":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jskLP7pLh5be/A2RUtdA4M/BI3G5hEotOq1z/+gsPPsjHZBuAsDUnS2nrvS8IwS3WEXb+9O8btWspgjf5fEHcA==","shasum":"7acf6f7061443a45f11d103d061d44250c35e1ca","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.220a4e5e.0.tgz","fileCount":18,"unpackedSize":98014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63cCRA9TVsSAnZWagAAlmsP/1qCm/MXYWzPBG0fOJK9\n9mcp+sQ50tFchWS/KpZzAL5hSmlJmAKoySBD5NqtVfTaJ2UbkUxoALVH8JwD\nhRL31l+6yv7YYzAlsm/1aSC6+VaCVkPwFz1bGCXhN6x8cO0OoF2I8EQPJMbw\nB/lut1w3TEBZ/tGP85pbuRRfLpiXmPGp1WzS4H4/5OjTmUDHQm0Yf3qoGXn6\nrPiTtXYCE+uIKODydaF1U32zFD4u3piLA00cUhuTcqi4+i9J2nim3v0oblk9\ngPhKoDEM0UUdh6L7/A5MwjwZFVpEkEvc+ARPV3t7vT9F28v3Be6sqJQDWQ8Z\nk+Z01v2AnpoImc+0M01KjceeHZWe3QXEtl5vchQWuvy0ef5+mh1bBZHdGSWa\nLQt1LbUn1MWMDXNxnPP7cOXbsa+mvXrs8n9+hlCJuWcXvbVl39h34d8qGDrm\ngYaDAgTUGSffuRsuy3ori/r80iSJD4B8eSAU3GgM8b8HYAKlVc66mKjITpLK\n7o+rf6t0kp0sMJx47eJ2OjwlQERXkVOJjObDM/aeyo6kxGvMUc+LwBfHsNjd\n1ReIdiH3mPEjh2zETlUy/3lJ+U1cZUmCuciy0lR/CUj83iFMvJR/d6qQX/Ma\nVyenA7P85Gb5ghWUUo0tZgX7xzEFI+wVpVjtdmVrva4IqyOIOLe4oRptEMcH\n6DQj\r\n=uepF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTj/RrGuRVHvr67e/GFXxg2HHIDp5wgvQV8aCdY1V46AIgEsfQo4Aa4BTk+Nt5OI4nIPAiu7x5xvJO4HT7b3aXVk4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.220a4e5e.0_1623174619856_0.57216630720263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-ripple":"0.22.0-canary.6b2d6ab0.0","@material/radio":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.474de7878.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-knpi7ZfHB1UAYCuxgNoiNKxZcUvcz6sBSrqHQyWX42O2kU+TsH5B9Ydnv5fhtrP5O1Qs7c8o8B0PGn1HMfyJRw==","shasum":"5e822d966337a101c4f4df05c60830f0b9ac16d4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":18,"unpackedSize":98014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jCCRA9TVsSAnZWagAAoTMQAJ7ZiSyA6XFOx4UR5xmx\nMWtNC7hJ+GB1+vm9qdT106ZRkJ9lUpHX6mwJIF8wpSWpxZxVxnzUtaYhrFpT\n4YIDKmhgESymuJmg0TPC4YxuMEqk8xwUi3GElpoN2Fx06rBQk+6wIsQ6ZF2P\n03FcnCbyNulIExM/YoyYySPSyZGGmc/45C+aQrHkAxh4ovEOv8NLMrImDYqx\n+EJbdsZLym9VFBwZMcxDwPY6/seVBT0ZH5iJiTfO37NyHJAMe+5Fi5qnfh29\nCvwK6e0le7bfcmH7/iozpnpRq18ogIakTBpvOPfzjtwxzm4w+HF7WKm+yZtA\nX+VMEqNwhhsHQdJxMzGGlRL11LK0Hs9QwK5g915GIULMUqJO88BEwq+hd9Ef\noAnt6SUystiixAUAFvB/q4Wb+ltyNQ4zhnWiEZaIMnyn2bzB5nkpn23ZohLi\nVGlaxg3a12D9i76SxccFFvOHtvpV6HKQw1hMA0oFUSTREt2rF2NG+wQKchwU\niWsH4Ah6DLSvGVTelNdMPqYyB8HJWo3v4B7G//v5P7AVLye1c+ajjI0uq3fF\nGrSRe6Ur6MnnZ3UAp04urjzeswUk4+tFodDZ2Y1TdVnVqWX+oIM4M7XCOfzb\n42BEz2ka8UcMdZl2vkRPr7wp0Z8sjlnrjfmO+4VSPUBs8kxt8KvVKu40zuyj\nqjez\r\n=+YLt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpC68wMi0t75mWhXa1oy9TYKyzewUK9153cKONMTvOJAiEAvnwL8eFdcGB3HaLUqPqLJ025jvvxyPFgVYOEWVzgGkU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.6b2d6ab0.0_1623177410450_0.6030847742984482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.2b20825e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-ripple":"0.22.0-canary.2b20825e.0","@material/radio":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8415ae585.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tZ3DnpQaZSzjygNgO+8OFEH+v94RCL3wVAfGSvpLKdrfzSwenjv5NgU4lX0Q9ai4eJEdSIWmqU6O6OAq/lqjIA==","shasum":"fcc36018999ee29c48d7f2a4a4af4d2730a489c8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.2b20825e.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/Z5CRA9TVsSAnZWagAADxEQAJl4btuhWrzKlDVK6gRf\nbpWfhthVZLoQCcQ06+psewMkshlR00+pHEZ4lNblUeXA5evAMotJIQ7lMHWi\nJ1+sIK8ev3zE8Q1fEI/dZcSjOEOXgXm3A6KdcK+A7VOa7gXMRTvN0KJic2+B\nM8gt4bbQunkXpmuS3BZkbI1hIKlSg2vm5lC7FJMrYpnqjntrFkrndKMTwCyP\nPhwLUWt76u4dG2kdShrj7i3u7bHsnPfJJfdbwL19PJytSgjRQcYR0CRnHjgv\n4PYWFr+EL9otLbxcpypeZ4iWp8mpaWiRX9rC5TP3zhef7dB9LAZPKJ192TsF\nter3RYv43fayfSs7rrzO9koe9/05VoLLopK5S9etagNvZFDjh1v/kEeZuD9z\nOFTd3OEI4Jn3u0/VMnXisYuCfDoifJFvh/BubX6zRg5PxgdmNLoeEFEVRafV\nSg7XfCdu1NOWyYLdCk0XvNjvkaqxuRboqtFMbCE+4Iph33TpzSsEt6P4NvoK\n3cFRy0lP+XUyzNznhV6CJ21ZqzS1Crw3Mj6n456N3IHxk7F74XGvALQlFch7\nbVbrlssdrg9rz1vFaD4pSwrYloNfrV89/2MfrwCzMceSXbpskN29G/SrEkbC\nf8E2ztjdIpV3sxjbYTlGGfMWSmMnAAIINxV04N86PcYisVNF0/0LqWx596+I\na68O\r\n=BNiF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDSj1q4XeDHSgrtoP1qs2Vg+ckcbMsSItbi0ezanCuJAiEArt2KkuJt5Vvvfn004QAS9Z6CRe+22aJidTgsX6MV9YQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.2b20825e.0_1623455352937_0.4658342337052219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.e1511867.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-ripple":"0.22.0-canary.e1511867.0","@material/radio":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8415ae585.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vc6oTyqsLrIpX0d/BHgLri1Q1sBHmgv8qusuNUQDNzrR0sH1njul4pfOxrTempjuZeHNclCnbgjqNEyddM1O7Q==","shasum":"c78e02c2c1f5fba4c436436363f298e264fffe34","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.e1511867.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZ5CRA9TVsSAnZWagAAsNwP+gLB6gY0GZeewi9WG0r1\nIoJchHGgFDhrkBEriQ6XLXw+wMoq3j/owysOQDAOgm8s9Sc6BQE7FPiPwOnW\noKfBUH74PcW22j9asybAPVc4gfaSttajq9LMKlGMH2+0k5v0MSUUb0spIseH\nJyMEKMfiqPtfLBFFVhC9deeiA2qIdneV4V+7T4MZrLcai6Yb/aTDxqGILw0J\nuv8NywrArHtmd2Ee7LnEl3gTdph4/Q/fn4LrV2eW01eBDG1ldd2BWtsjeQ2V\nE7GnQhL059t0g0wJIjKtiRPjKDrwdbw9FNpCR4JPn2qn/EWtLiG0ij2yNaTX\n1jg1dEUqgin/G+YfkBJYKVEq1VnV1sWBQ/lb9S7GXRUSotMX1ANeKPJIe7h/\nS31wbRf5VSMnEBPbMNWCjZk/sCjNN1CXYovkZbOJiOKhukkVu7OI0CrhcL6r\nxU0MxCxvRTmeYwXYGksH7aHvAJx6Oa3SlxJ24qjNlg7AuvX8SzA3kRCOEl+O\ntLMOtMcVjqdwkADZLmsT5qRjeXo/BmcKs/sPnnGvtawK7BcNDLuUzCjN5yLi\ngVYVqmAEUW0ADJkX76Co4bgGh8QRwrKgAXdRyLQhV1saaoSdajQS1TqJq0XP\nB/UXwa68ilqPwpZqC4fM+xUfTiIgXP38LS0gnBaaYO02RRaJsdzh4APeS3tK\nRc69\r\n=GyH1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD++sZF7kM4yMSRyczn6atG5Ey9MNc6Yxks+qbn0kEpywIhAP+0R+N7Ak+wovwycqCMQy+hzZma3x2HJl58bGLRU9M8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.e1511867.0_1623459449111_0.3784279074306627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-ripple":"0.22.0-canary.ef4a0c0d.0","@material/radio":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.8415ae585.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/VOW0N6AWAM9uGR2NYQtyrEB8ElyjaKd/YM0I7L0v8IvX6DMhilZtKwtsk7mitqKBhh38eNgcNq8XrG6AEzkeA==","shasum":"0ddfaa75b9fccae2e7ea0cfd63211084fbba1c33","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTmCRA9TVsSAnZWagAAAUgQAIKefWqUrCH9IcAqHDOi\n5XDkxQOZJ1/sOMOHgejPYnm+ioKwKKwVWHLZ3O1CnqWZNUSD7UoH/VRXGemq\nKS62yHDUcXWzdu1hehQWNQl3knUpwNKMl3BBJr0bYLWHIOmUdaTx0Zq8Y32R\nMIn/iz2dPIFSrAEYLb3jGPoi9Yi+tTik19Iixxn2X9iQg4slkJJmqYaZDnjY\noEcwHOiB4fSEiq4YDzJ3tCHBo8VxEdpUxLbXJwSSg37Pjh3rO7WnJXbSxOVZ\nzVbquA+O9dltsLfvyBO0mpg5ONzZRVBLqL2W+nHAnezGNjE/sH2vHJj0c/M2\nj9y+9NkIYeFbH6fP9/dKCsEjx4PFmzFslH+HKan0ljYDrkGxhTqodnQfHV5n\n7ExoizPcV1x8b7YiE4b4vC4gF98JbFnhoYezolOTfLF4qzUHGW6jltiMyHfF\nbByIfOitF+YmxRjr9kbYnkI0Ss7mxnkQ1pEJLVFiz7OX4QGyJCKOreFjMzZc\n7G779Wk3FtsCitGdh0dl52f6U4Bcdk7K/oFUTKAEynd2+KdSRbi/yJ1FDENw\n/c5CvwNJyx4Yi0qZkMmz2b9kelSI+DB0s5SUiElBaqu55AF2VBOCBoTOSaIK\nXgmLTchzKKoQZu1Jff1tZD24DX99iYFzVVyhszn1MvWEwgqugYwYMT0I+HU1\nH9NE\r\n=OoGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDih77c4MHczlw41nQpngmkqvOXTCJ1oGDxIL/ycN5X6QIgU6UHVxBlpkFWzO3Px/14Gcl4cHqZPIhOu5NecIec7Ro="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.ef4a0c0d.0_1623786725996_0.4777408019169085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.573d8913.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-ripple":"0.22.0-canary.573d8913.0","@material/radio":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.f705e8048.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0ZAC1NomeZ86FlyJj7/AA/HBlpx5d+oFt2f9tS6URo7QgITM2f4rS9ZE0eF659hGKteL6p7RUwp+TEAdlXM5vg==","shasum":"dc7a3287a113449480a203077280ff2db48fd5d4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.573d8913.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSu9CRA9TVsSAnZWagAAQWcQAKM347FuF8/LMFul6HrH\nBtEqWym7JdwSzPxq4wnliFmZdG5mMMazx5OR93GATIV5RlU9wKK5DS8ATo1P\nUj0gr7ODw0mfyoh2EUsAEJBlYcXGZSBCphgxGPo4Zx6IA5NTJ/mTcJ9q780f\nDn1ejVvCrPpBeD92ACxq0l6KsxezDrWjIDCPTVaGt9eaVOSMhNmso+8TJw+A\nWvetV+zL5QVR55o3G8l/C8cAT5GS67gZUZWHdCYaP9I9YTRj6wxHnIopCWI3\ngFoOgB/gsMYQdRtbzHFX171alvx9sGd/3gVfP7J6jGVUAClqxlxUK8vQMEo3\nz3s1sju2df1PZSxuyx+MPOLcpub1JmDFHR4QYj4+u8rPbvkTNYxkU3ZirTcu\nSDPZELBKiX5Lp2rM8O0Fi90d/YfFv3kcP14BfA3iFOQjC3v54GbHvlM+nCwL\nwzPQEyTraRfCwewETUOpcYDjWVvHI3lC38+2nM56bPVz+h/Sl6ql6M1wB6vx\nBJsbGbva+8U3ZhPgikZeZJHMV3KVZ8ReJ52jq9SvadvVsbl+YF2ErfS4P6M9\nyCW38Mnx/hw7h7OUByEOEhWzXpL5uaXlDdMJe6vYMCgR9mj8QOcmzxYevSkE\nfHCgFwlFpV8VsQBrnS0u41Ip3hdwpyApzfrWuWfKf/t75Ui8VGEj9CHeZC25\nweyI\r\n=ASOU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuRWEphRCp+/1sZFVUsFsSorlMsuUeAMxgQvuVC4HpWAIhAIZeY9YyI7n/zlMRcTV0VNuoLJnYe3Wj9bakOGduVHkB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.573d8913.0_1624058812895_0.6227570130915538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.21dba001.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-ripple":"0.22.0-canary.21dba001.0","@material/radio":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.f705e8048.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6Z/UJcNWWZu4vIaj/ujMh0rUNOAYY5tdF2Fz0AmbtFsDie3gFtDeVPSkO6XRpYxomiP2krbNyKTeVYiM92Zmlw==","shasum":"62d7facb6daf7583e3a08cec41eb9cb8c39f1d77","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.21dba001.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdhCRA9TVsSAnZWagAA8kgP/1hU/OEkBNjMyasEKMbo\nXmB4AGb8doAVnFg0yfYpx+xW03DxD7K6b8jVmDlClwLLUzbRF3swxlB0wlTI\ngDhqk1FR65PMoeIOj5PJt9oCfscIjXJGUToE2X9yp55SqWedQlqDm0hMuHZ5\nkRFYpaPqrH3s40X6L+80EggVTQ4HmEwL3S8nvvbf+LG53XkOxXce7ft32Lva\neNlBnUejrB3lUUInHIEu+itkW+zqeXXFwascaYoam7EkflOqdgAyGPamlrYm\nivUr92PmH6PhARywjs6z771wxH+NLqhVwMvvIlFMmq6063k6S9d33PZmGfYr\ndVAHe0tHTPrGa814mDxnrgUqMO+p+MOgY8BeZzs1Wi2pfy29FesmVEUjIaCo\nDMF8arx8l6T8oHi2iKb6D/aDQ3sty8SOnocNEoC+ACxftrNpVS4kps+c/e2z\nsGDVlnGrlc2+Row49IeugOxUdk4aH33O+cJxj23dAxKg39JLWUmr8ec47xhQ\nKU82mrf8tfHNTYIbbvSotD+Wim+Qe6wxJWmBKT/CjghMQTZ4adusrOx8Z3GF\nuGu706PzYPxFt25W3FlFvLc/cmWwAw/18xvnpKkLhh1cqMqoycchKumZPnwu\npE5PhhuVyzTpWg9NDUPopGCCcMeoYxtsWjHw1+azzmBHlZnbGF+brAWBOh5X\n7t5f\r\n=kFlB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsC+3909DtceNlDH9uZR8JPm2p/YoxLciqnxwXVv7llQIhAI/Pth+Okbc8SZmYJUO8a8rqtxJj5ww02IjiIcd0N0EI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.21dba001.0_1624311648832_0.7096080071143602"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-ripple":"0.22.0-canary.6f5bfd0f.0","@material/radio":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Hpv0nSPCLFF4fqx9+rMBT/soN+f6/i/Y7l5IK9SG/HsR1Acdk/2LscFcvFSIpIJ69htmhoMkNoGSmim/H/gGSA==","shasum":"6bc18a3c19faa8cfd07bb96d6b016eb21046e31a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2QCRA9TVsSAnZWagAAbPEP/043H8bU4sUCaOIiJkaM\nYnGdGDFR4TL4iIxaSlP9QovEOTISdQN6b42tDa/r7zOQfSIALcMpIrepeoQ1\n1lMikFaHtO9nh3NNtgS0K8yNWNT04ujG5XOM84mj02gnJkXrgN00CTqq7gat\nN105rsz0wQpoMKh+8ECTSby4+/7C5rdiC9v6aLArhUz7/W8giizRSnA3/Y8i\neB317nznDOvUsFR4jUBuNS7oMKCaxKm5FBXdNJcMT412PBp7wnnsnWD7H5EM\ntQF9zxdq5fK9Zo+eARYFmJFmiH4griYYbHbYfYP5JfsXyz3u490jSxzCDBy1\n25GyjLFFG7Hqr2qNuusXbYZP+GLvpL0tv87XG/FuJR5AXIVgTUbdAl6PwaFo\n6hcvINSWnykcTTykbgipqcYjUbzOegzDmAXqlDZCmpv7enKoyF8fwBO4oGD2\nSPo5/UTvyroFH4vBQSMTJ45t0CV6qklbb/wDWPjrHu9AvkEbOuPjGH16rpgY\noAEbVGOAwxdJcEugIENdNT368vYnMKG5Q27nbs+1I68+SRgjH8cr+FS9E9r4\nPG5NnxFNgO1ErG4ME8GBZYb1Fea8ncEkl9UbJAOB1C/YeMElj6dCyFrbA3lV\nqxBgJn9Ts3P4qsSHeq6vRU4fve434pnrn8Y/4qcdxdcIASQFtX2l/uC0Dnbi\nHOsh\r\n=ICkH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXKBC318oIvpBT9zHqgeuoYEJEeZF5tRn19NNcyjbinAiEA9Zf7i2PyfuNaHRDBfuKIcYUc67nIPLsOy9XF/kzQDwE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.6f5bfd0f.0_1624575375933_0.09886405060193959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.fd8360b4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-ripple":"0.22.0-canary.fd8360b4.0","@material/radio":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DyqVq/G3ABjmXNZ5uZ8pXy3Kjw+QwtlWIb2Nhm4qZVYdC1IF1AnzaG5X5DlrwksCuCDF67iRyvKOnVlWmYT1Ew==","shasum":"3b621bc2b342ac39d61b3584c027d5fc0fcd31ac","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.fd8360b4.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inhCRA9TVsSAnZWagAAEMgP/1gGyAYYl0v2P+D9lc3d\nXs4s9J8WXYst+BLBcUME/+ojcC8eFjTE4WDTzerRmLlupXLI7Aq8RExwPGlw\n6RN2IiLspb5DBkbtkufAx8b0yWf28QRaGpz6MdPn50hlpOutIAUkodwvCPLp\ntkYhlxYclAKyd/WqaS6Ksgb2G6kLpoT4l2nVkvZod/u05nZrYW839sUTnstc\nLwD81733t2bjH1nYOsb6Zq/0VBcu0dPzuvb5PYKYst4QHPeEK3cLIkqze2zf\nBaNV1IaEXSIUo0+3oDaV+T28SToiHvOxUGugSltQVKRi2Ieb/kPIx3ViIPVs\nplth/PIPAkGgWbiM5tmWSlFb6MxHrOweY3N7lIV431A+ccYuQsihwcRomL4F\nE1y9AUgLCh7VG1uwQ1VcsyrxG8AAYARl4A/cvOQIZ3W/o5+T35mUMCuCJ64M\n3wtPu1Sz3VUiqKYRRA+QUiwbGssxZJjmPuE/ktx3gWnqaCBN92VTAIlODo2n\nQJLwndmRDd6Mc6cpGp5AVEKXl7C88uCvyg0QbVKm+c6Y0nWeWomoDr4O29NT\nru4RsVTqg71S7+r3JsKvasf3Bynfw8d0lZ7kvEXGMsxi7ik0IwRAG/eY4+jo\ndAtrk9TsnoxdStMwfJgSuDsFCY376wz3M0lRNvMvjvBdTJGrtTyycf3d2peD\nQLpk\r\n=LB2N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR/J0u/GAmyL3JnFCs2mwnC9peUNOxa4nnk1QH7/DdIAIhAKIUkcI/4G0tsT8YEA6GZ7MAXPAabLQpEMw3mUk6hZVK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.fd8360b4.0_1624648161004_0.8617672664407254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.6f74432f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-ripple":"0.22.0-canary.6f74432f.0","@material/radio":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9stu+9uEUjcZJI1tGx71UBSi6FR6oO0J+zidWcJRmmAYGyiNl/8X4WpVO3xyjzlg0n/kP3EktM5d/JRlOI/SEw==","shasum":"213920fbbb1dcbbf3ac2a29184c29b586b4b54eb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.6f74432f.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDQCRA9TVsSAnZWagAAicYQAIQX+PZONVyrzObbKFDr\nDyfgwfZLW3BJ3/ZfUozmZM2ZUUY3IkjmHJoA9MnOCpn9ZAFxgaiO+MXlNeuS\nCPQor1I2P31NwOSTog3TTKlkc++ymoLN6jvlFhm7/rZE/iLiIhzPfYiD0qha\nPg5Gg0h66BcyYN7z+5AexZRcchgFVet2mdDMd7587/VsvoyOJYB/ZeCUKY5H\nrBV4iY0Oely/UrFHnIqNwltU7OUAqZjAY9ktFXXdH+OScJSAJykMRVXw7Dk2\nZab0xDlXiGAU1xdxatZNUjYkaJlDMuZVzFBLgWijr6zLckRBvX25bIBF9m4J\nvuj/O0r/3tE7I/dRATBnvyVByZzmMLf2XjZ8qkHu2hCHuWo1D28bS43oSpQ2\n6CibThFJ4zzso+J4DxPCbvlvuBQHGT3qPXSWNOTbtKv1RwF6A1Dphypjf771\nWbEQR/KbcGLQaI3S4wxuMXZJL+SaUCb0RjSdbGC+tGVMi/8RFsE2GZHinZZB\n3AECtyy24UllweX8b8yhSaPz64PHrN4nKUupJbCU/y2ZhhuK2i+V3cZruvwy\nuvGGnb8Mn4GT0tSvG5Tit8xjRFbHPLTYJNF3a6djrcGxAernUL9eBLgvsq+M\nwHKa8p24pFTUIaQ0babHYNRsnYJkz6fa2dImPCQ8mhZVlOhS1ux+Rv32VQFO\n1kty\r\n=0U23\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKRMAnX2bGH/BxuE0mz4RbHvbli7D04/bK8ANtHflv2gIgG9cWXh6NvOmXmoNThrFn/HG2YmvyV9CIZpMSfFtKCVY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.6f74432f.0_1624654032453_0.9327656336428096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.b62f901d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-ripple":"0.22.0-canary.b62f901d.0","@material/radio":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4ccd39bdd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8OUp6o9/VqgABL2KgIwrzoWfN2mkkyDrHGAieD7LL6HGEJtr0Sd4F9sVWO53v7+GOvdFMBK9INORwkiTLgPuEA==","shasum":"cbed0e65d495b7886b8f35bdee841b058339c47b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.b62f901d.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lX2CRA9TVsSAnZWagAAFyAQAJOK8Vpg5UItMMdp0MWi\nRETLR4DKZjDdKzAGRBhXow+5IPtVlhPllEU15S4S5+GuCDOin2aEDDCVl+GJ\n701o6uXdF6WK8GTUTbrmMl3V81v70jOsR82oFhxR9VTgo176Dtrtw7yjr+m7\n72udrxyULQGeVZ8S/ViaA6BhjGFHTcX9lSq2xmbzuBKNhudTR4tREAwXiSti\nL17Okh0Zjovh3ev1kC+COFGtrSFHFTltvx71oV6UwnjlCVwKyn7YDQWDMJrr\ncrhIhg9TeWPUAzkmq4TSUERITWfrnLDuRzUpdZlcR8vM5k/LG9bv8YPN43r6\nROWAh42Fp9yBgUBdN/jlLCdC2n9s2AOjEcKEGIE/ApThrJSvfhv6yehQax/8\njP5BR5FHy6II/fAWqeWmRQ2MFceJgot46P0MSOkX1S6+u0Ns7MMdhtT2S8qb\nqP9w6DkHg3zJeY8SBQqA8rALQ+0g0lKwS9eZjzCk0mf4otvk9V291MpePCMP\nUBip97nC/B0wcC6feuCkW05HSlwSXe3r5ZGaq7l9jB/ASgYU/6e+dkjxiIgr\n4MMQ/ICyfW0zOuzt3a5Bu7GFcxx6T3C1hU/gWg2GFfJt2c1iyACPz3L44lwH\nV8PQgu9ZUmKWGRl/Qgk814zMhCXkuaxEWtCqVyvsPHW3AGJNKjcD1iA+hed7\nxH0c\r\n=h1WH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9khDculXK3FOoaTiA/isxPXW7n8RsD5jCpxUJFhSinAiAxzvAeEJ4NALjiXrxo9OJDOtYO83hJ+3SjBs5dViC3xA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.b62f901d.0_1624659445933_0.3767529294075824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.73122cba.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-ripple":"0.22.0-canary.73122cba.0","@material/radio":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OuWcfrgMVmSIg1tRpK2mzNsPZxZu+lmOzw72WzwgB2UX8UFyHNUaKtmgMkYo8io00vj2oneJKMI/uRwVOfiwdg==","shasum":"e51d9699c370cbf9d01177aae69c53d15477e255","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.73122cba.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfcCRA9TVsSAnZWagAAEhwP/3pppvHHUw725xyA/SiZ\nyewBQUfJKm9xISAO9nZN/qKX+VLyZ63dEQLEhHg9urmSIhWpqXXD4UN8Nj3x\n0PFp3VkPLiVIEvDsNtTdftamhlt2wUWgyEHBBHQ7ZPm3oTYSOK5GbrkR0Rhl\nqXl2E4UVNsFmqHb4C0Tc2ZiiDJEA77EhY71s2+U2Isg5gREa7oMoH7K5ZDpD\nUkRmgtNr04UDxNnMA9dxUSlkTHW2mOBV3LOD5exUkU8TlH2qJlQGsiKzuKBx\nx5JGEFpdEMxaZGL68Wp0y3c3tUZ1eKpNp41Fl46Aisa1maI9dJlGwt4Gubsx\nULx/Oo79P//9MgjT+nh4RF1llZi1aEQ5+ihxtpwpIJReqN1iBGRYtXVr92Eh\nUcNHdbpJhP/2jt8jsc5tKIMiOqxzcyLUltIelzMkJ9rZJ3pgZhfA9gf5DKl5\nP3vEREpsojGt147yqobxlP9drjg2Tlc+38CTIBMdvEsK6MpywUgy3UO/XJkD\nQ5ESleV4uVb1ETal909Ad1EzsI/QpL340Pmov4b1ZgyTk3eIh7bp44myEFgn\nw5rwS+Abkso0TNmnYIK2YtOBrHK3uHsSbTSM4i0QdAMW7blFFbDF9BJ48T6l\niemc9ZclAzaledRxgnS4v7S/IC0nXKQoZbLHNqtTqR6vcw52hJs+ArYKFxPp\nmRMw\r\n=gm9Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCECohTOonBt5ye6DfRhEeLXLs7NjWmWjJY4YwhWuVQSQIgECSiNJDb/f+DGbtV74gbxbQFDQ4XHI3lL6w0poOXurI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.73122cba.0_1625081819938_0.681915205717126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.a6912af5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-ripple":"0.22.0-canary.a6912af5.0","@material/radio":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wdYS9HIFB/hGrkfmJurpH1HJ3laM1n4pBPDOHPTcjaS/IMHMtHD2jat70PA6V0g++U7RxyOEq0Ktvj/mErcHFQ==","shasum":"2e0491d2af4821bcedc6796dc2fbe58c09ddecdd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.a6912af5.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTVCRA9TVsSAnZWagAAhFsP/jmKwhjEVNokvDd6d/Sq\nGlqZ+YK66T75IXP/Zi/jkToC62tWJ+5ig1lHOF0q8pTJwifeTihyCa7XnrYo\nsHnBEU8xeGzd0I85lHdMkB+YXH1iv8zn6F7q3VhpTOyi2m5u0tmDWJNFpPy1\nF4Nq4Bf/P+VeRxUVys6pRkGmHSw7OT3mZwHpq0WCtMZRibpg6BJcpRKnezg+\ngRTo7JUdpNXFsgIVJSG9gkl6gK3x5oeAMMe66PdlqTKrhM7QwBpdBU91Fkau\nUVaT33yIzwDnRaIH5Ibwyt+hqzZI1fc6DIYby4Vu0j1OSbJMWrBGfSvS0bV4\nmfi1sDvMOdM5a9ZEjRvggNFwLJ1lI+B3J1LOXsR8LqKV9mK0wJHh5t/t/mut\nSQ/H7ope3TAIU8lHW/1ZrDsZAUFHsXKoJlhHdvNiRjC/HCOlhnEkWO52aydO\nV74UAYHmHRbaOB044H8oaN+bw0OqtSV37cFKUIn8iHxYjjburA7jhlKf0itb\nIhNvrgvpiSLlMOEko50TafiYdaFRwv20bnHb/By49vtthuRGrFZAAYGYuaQv\nKN5777Ofvp7vQBoyakEjyH/rqovobRcQ2ad/zrAYVmvC9n0CUgIpzNtEP2yn\nYjfN+VHSlF5COn3Tz5L9KLMjz6xK7W92i/lhTafTwiB01TklacJ3npJLaOQX\nfT27\r\n=rh2Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA0YzmBy2NCA2RzP52WsXKwSc1G0X1u8B50pHsfmkoawIhAJsjdxrzMYIMk8bARTNnv2dOJMJOmgUzMnY3zbeJr7FI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.a6912af5.0_1625175253187_0.557309755940653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.134f24bf.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-ripple":"0.22.0-canary.134f24bf.0","@material/radio":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4c80072fd.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zkXuICJ0gfddnukqRRaa2kzRW1bvPeMl7AYChbCEBxrf6//Zteq7gCiESyW6r+4wJH10TpvyZjnkpOToMTVlgA==","shasum":"819918da669b3f6d7d49bb8d229cde1a4069892a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.134f24bf.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJ/CRA9TVsSAnZWagAAzJwP/R5QcQFg8PpzNpimDxeK\nVUcDCTndY025IkkpABbNYOAXOlgcKI2GoxDMJeUBYU1sUamvEflO1o1fOD0C\n//5x9W6Uimliwq3C57gEuvzLuWcIV+jf3jWVqB1vGKLFBcEja567hyqESNPT\n+u4Jn2e7kmtg9T26xpIziJBu/VeObUibMfh3ydvIfzZfRD/BBq//Y6prwJAi\nuQigHMN5jPeR8pojWKsy1d6A8XupWrB0gmLW/eUBfDDjidrhmsvO9ssP3TpS\nOb/ECSVq4ybOUv6x2qMjE0qzJjQareuOTD3tADr8+NQPfjpj0ya6rxKK27ht\nybg1grzUdkHH8l0gzorTpbglXHT7Wp2h1dGd9WiPUA/t/NFYljCwAIGyYq2Y\nV2H4gG/i40RyfDr+WTjIXfIIKwxZuuHougjgXoaqCV1XKrfVzPnqKeEBAOwG\n4yxEfjD+27vhp9cEr9wrS2FWm3YXrqs8zdVDBp10RHWAC5bNL6LtN6HYdgiV\nfnBTNGDL/kreDfc50ET/OGlYG6MTUO/v2CjISoUPf3samFhBo635Wf5I3NCm\n3DJVyK5a3Tkpd7IaKeMZZN683miZPueP+uBqelJPoZrAMUvRgUH93sGT+dq6\nyrNr78TuIvHDGuubtXQQX2bp0mlfH7D5snMAVooQZaOyUDPYTBUt7eLxd8+c\nzlPf\r\n=CLoO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAEoKbBLRWZoYiGJWfEkZEv2jpMheXrilZnUXiu1eS+gIhAKkpP9wJ3wBU99e9HdyOColJcNThT9czeYGcrBuxAU+v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.134f24bf.0_1625178751523_0.11526487148361353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.1debb78f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-ripple":"0.22.0-canary.1debb78f.0","@material/radio":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HSp5Ox3ZVHd6wFN3rvSKZgb4725hfiWCSzPhHVHgNJubAl54q50eONPn+wLf9El7M1FqTZufrC/rvVBiKMzonw==","shasum":"c672d245ce8f2afa6f71858f12f2deed5c17edbe","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.1debb78f.0.tgz","fileCount":18,"unpackedSize":98062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlrCRA9TVsSAnZWagAAZjoQAIHkDjZowQi4X938wgIu\nmlQ8KdzYbfFYLF579I/2ElkYdGzG2w2/Ja4VnIuY6nXM3sG6nq7L+HzgxDB5\nIg8ZMJHRbqnezwwzKSNKnXCC2/xXH8yvS7mcwbAw+jXwFICJqvrc/bOAecee\nUwE0zgAuz+g3rD521giz+EGQJv6xQp/2W4LYc0tWyYKb/sGWCcHyxI97+PyZ\nlg3KR9S3q4LMeyCZR/BZ1AkXhOcllxUqJmKO/zUsuXXvHldlsmdtbwCJSNCs\nP0nLiEnrU4WI+wWI/s702lzk5OWF+ZeSwu1CHmk6COJbxnfoLLQJBXviWnFC\nW9eCPj9X+TDHWAwmOHajPVXbb8FS0crLHo9yPqJV7S0q0UjwuTNV3hP20UN7\nc+xTpOTZnIKNcCLt5oCjIZUVtshx+2CXubTTurUbFVNVeCVGm684fxLc4JCe\nQf5/vkIvCRTNXcPFD0b86bxnMBmHw32JxtNENNNjm8O4OjjiT31XLZMKk74o\nnjuOwFNf1lThJz6xClUAWdEpSKaz8J+ZpSNQcWLOMgdf7bxDmCYQ1dqb8IZi\nzb0hfPlySwmYFPBU1NT9Kr0qpHnjulreOOZ+j/P6JD2gfALr7xDQ1Td9B0mM\nn1vhSKUzrvWT9Be4VoenRQ507s+aj9Cgrw8gpt6nvwdMAlDxQthIaNQBkLi3\ni+x5\r\n=XTil\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrFGCSQjwd6h3xMulu3lOC9VRX1axHUakhkEsp5R5GtAIgWRw7X7BzZcnuCgaKQ0ec0Cq1oQFO2uuZR+lMgkNjcSc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.1debb78f.0_1625618795410_0.9754109039731389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.d53edeb6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-ripple":"0.22.0-canary.d53edeb6.0","@material/radio":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I5GCXMpvFgfA1dbZYNgq4fMsWel6MN8P0dz9vG9JMwaMJn79UllPbQ8sKAAPUFyNPBulpfcs47XFSiUjuzWTJg==","shasum":"57d5b3c263d1b52fdaf2f78219ec1a3ebab1f471","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.d53edeb6.0.tgz","fileCount":18,"unpackedSize":98267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2pCRA9TVsSAnZWagAA5dMP/3dzhSnfv0oKTnzaOPoq\nweJ5ogpNDj6vUdIsgvUAdZnIiZ0hf2Ty9nQb2XqAZBmgi01/PFO1J3p6fn5L\nOnNyjnHIR5h5SFDkV88ZH0BHyV3O5RMAVa85H5BEOtSfPugkO1KqS1rR5+SS\ntTbrf3mKBBIfva5jxgxZfzIClfkjmXMU3YIRh47Y9nxSLcoOakXvoGktAaQb\nCYyPUTZF+ZyAFDq1Q4D1dnyvtGYcpYHhAp9WFDqdEYY+5JkHDeIgs9TkLsRo\nbx4zQQhPuXAhk3p+j0/C0H6/wfKvln8qaHoBEbBstZZonwW0YjsrVO9IVZmX\nylXkG1tT8FypQBxulfpd/HT4f9jhWsdhk7vL9M/EO2sIrtkmW+dBaPwFpX8s\niYMc4PFdNeLLNDQvsMfFa76PdJDDuMSgVosrsqryQvz1S/uXUxDvj8Rj544s\nSJZCT9HE7PTsnjVwF1NsvuWgaeB+Z3LFkrzm/E5R5NvdK/fOt+fYG40h3QKw\nb7MTTtipphPksQLZgOsXhKsiNYrVER4bLt4QmZWrVXmMWVqHnWeJXQiw5OEr\nJBvlgsnLUztgWvOrOpnyDFwpjWkAeKQoAdmRYU2PEadRikjp5aEXGcXv4NPz\nQo2LuSe6LGUtHbsTO3DXwjUVsQFTHKviZJ//TUVTCfIpKGsgs+8MJFwtTV9P\nM6Mp\r\n=IjCB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp73Pat3Gwn3l7LPf9R9DycM43b/hgJWcLYshKIaEExgIhANt7EeYsrJqMedI3S3XLMoTNtRb2FkKhLDxEOCbPQgZ4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.d53edeb6.0_1625677224905_0.027779378518687947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.2226489a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-ripple":"0.22.0-canary.2226489a.0","@material/radio":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w/Wz9PRQuRNp4KdtX89N/GRMhvowVt+QY3/RG9FTieHYzEyK6hUUA5oMdzHCgiDmBd9nJa0/pYsLRJy0wD4Qvw==","shasum":"6f954e509ec32e9ffbc0ebb2da29cbc69e7e4080","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.2226489a.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2HCRA9TVsSAnZWagAA3PYQAJgx4p2kIz5Cj2XWx23o\nKODJ+CtKZgLYy5DT+NK7zh4EQpKI31khC1mJg0L0UJoTreQ7X/orWifCJbDp\nNemFRV0kA1fnlpicxa8JLLNRV1f93esKFNzpm+LBgKzLZ0gvrs7PLEcby+NQ\ne6eNWSWhFB+hwxzM/RiOgxZv2mdt82kuchS63ZU8p44QWfbKIwM/pgfPXpqu\nj+p4xqaQX2N1ty9OQL2svx0Zj+IneQ/I2KuxkTysLMQOmLfjkZkaDunXjhYP\nhOJbSW0hU1mVWqpzaKxEa8YOFuQGdlKaiAEPR/L3l7EvSCGTAS1gsp0DBPj7\n48FF2l8CPSCvEZQNVWaKX4IiLf/ftfZ64YZdyWBtw9QadWwOKvk9FWeV4ilD\nIbiORxz9DxJRXRfkt+s15tj6zjDD0q61fT9H+e/XKNEntBIi+KWQvX+Lfbjm\nbp8kRQ4cL/8txfd1CNxqj8HfauodTlAdG/Dx5ZpaLCP3DFP5KZP5WfIPOK/w\n2+Y3sNUKb3fTwh7WYj19aaS6VMT701XWHB3e0rsRmlvr++0AkToqByMTUmlB\nD6Ta2DlR4w40MJe4g3Y67fGLHrh3S0K6ad/zCa4D9k0PPk9UBhxhcucR0mfa\nq23YjgluK7T0n51+9FY4HO0ZYXH6Jr5U4JJHc3QEW/bykbnv6NJLYe1QEZ0s\nwf1y\r\n=0Pni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAs/2r082+tRolY+96RY++3gnbx1kokByCN1p+Npd4avAiEAlAlo4I+0CuyHDrklD7gFjzCxHAJvVqtDZDok+4mwujE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.2226489a.0_1625767302753_0.2305523713889326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.d4801c11.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-ripple":"0.22.0-canary.d4801c11.0","@material/radio":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.adeac0549.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Hc5p2jjWArzccKNRzh/oz1MPel6PrxnDh4Ku4g8QzjTXTbyF/s1Eo9mU1siHraSZ098uc35KSbywAlb1GiLCWg==","shasum":"b23c15e77bfc48032961c09dff3a4bf0a2363f02","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.d4801c11.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nxCRA9TVsSAnZWagAATcIP/18TiARwAxD8rHj1q+5m\nNkSTgZ7WzMO1DcwoU26IGEAZ6X++bc6oGiKGSazrwYEWodxQVQo9WmmF8Kn7\nOotrI5NBELC3CZkXOgJmZGAxrNuuRuYXOvxG7ZHrxZAQykURusExwoflA8Gy\n//AmwPBJj/wWKbCNYNzrZ8EZrEXNZAh7pUs9Ed47jz20gHDudc6N4L9VXMfM\nyxxvhOBtK7NX80sffiRE63SV3JzV3la5yyme8GIavDIyesZkbhzrwTfM+1OP\noHBRYZdc5QUraSfUNLmrWH4xbA6PMu7rLEiMjoluZ9yVfHuIB5L55GT4VVBk\n+hMk8JHPNEF9Sklno1D3DFxCozIHJBc5/zl+GEkf9+hOIwST60QTI1dCo5kt\nHt7TYo3QutuuXoQdQIxMJBVbU+WLZ3o7eNMf5017NMLTM+yM9TpRSXLuz/Gg\nL/Rwr6DZNKiblyNIVt87dDgMevjjdLjcU+eCi69viksPafs9iV40fxLi3LbZ\nwHOciP4yl7W4C/0DL6pyVreM92Q/XJNjrC1EhjjyRifEShiR6xA2jBBlFkzR\nqmDRSDcwxqO5vYUXUIE9nCr8M4rFAtBGmyW+wy2KT5ssLvl5Nw2/0WXN7L6+\nc76SW/qBhXGq0ZGn3/2xJSso37MqyMMxbYCz0aXCGBsgMYUnMe6qaCoRbPQ5\nNtDa\r\n=PuLr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsMlKveosKQA0HQY+81c3Y6PkitiHx32+yqf8+hVCJ+gIhAMTrqKDzBk9fWTLFm9nQBsmzqZ/xt2t3rWcEaO+b6FhM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.d4801c11.0_1625774577001_0.7097153038907404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-ripple":"0.22.0-canary.7ec5f2d6.0","@material/radio":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.068fd5028.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TBwcW+BuyU9G1m14MnDPkjPlH/4B6K9dOSzBWBvGbvP8hWD3gBFvMA6Afp2/XZ/atrOgvWeq1QtYZm18gRKTsQ==","shasum":"875aee6a5fb44478f560c6202ac713c149c2d3a6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkKCRA9TVsSAnZWagAAlcAP/2xP39ce3x9OUipFZB0t\njQa2GEVqigsGyFGRkhRvhkzDBVpE3flz5npTjTA5RP+fdConvxKaYa7FLM/P\nkNcFAPE6P9d5pZIiyr9Nqy4bxraE4MeTjMpHFGMNB3H1I7WtrRJXVGB0g2Be\nhMO4FMUaZw2xVmgJ8FKTrE7BCrWnxhL2uqPPkRaNjDiKQriEEcaN4b15EXme\nKzq06WPCedqdeRiEfbbiQyeO5uzfIS+Xwtfhh+tYJ1jrsLBuxu2Oj01txfs8\nsPZKWPVT8dHLpsmSHZE/m0F/RCKkM21dkOG1SXIex0Q6jwChhF18blXYNAqy\n/+yXAm5hASVLEnRts6mrO9BxSVeDPSV3umv6xOoQoptby4Ejj0JMvE6eFLRv\nlvc1BwTCoMArrOIbHExvIHa1R/vqUHkFFXyGWYiIg+r7uaOozOO+cIWixy0L\n2laG00yxWF1NlNkF3atTAf+xNYnOcN4aBfogjrmVxbr/lArq3XMSSB0XzM8Q\nl++z3uge5GrBttB5CkAOCq/rDDMJrhwWcsz+7R4PiJpW5sjYUWUno9dB+HwB\nqb5vu+vlOTUng2zJ/jUQW6/YgU2q5afRgpzRcrvTZjAnjFu+4kEoPdQtbWXK\n7+s9eylXhU814MldcKTThnOhtckgwKYmuOxa3HTKNmL9WFDs7LwpiMQmtJhh\nLiBW\r\n=OpLB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzKr138+9IxYO0jOG+SoXgofg29+PoLEKUc7mWCk62XAiEAyOlz4+7L909HxAEatYMAq5Mjvoi10nXpqbaUpzMI1rM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.7ec5f2d6.0_1626110218039_0.449603188218056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-ripple":"0.22.0-canary.86cb4ca7.0","@material/radio":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.068fd5028.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KG/ZZPTf2sYaRutleF8OaJn/hA7onbh6yV/KqryvRCXLq3QcdTXw28gfeWwJBIt3HuYqg/G8JhNgLpdGUX4Vhw==","shasum":"3888d87c3c54e4bb06fb0a68fe52b0c65680c410","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.86cb4ca7.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9sCRA9TVsSAnZWagAAkGIP+gMmlFIpQr1fbJF21IBB\n5aEQ9yQWBl/VE2er6fYQNE9WfLblQnADS84NUIEDQVJZhtuXzPYXl9n7KpPy\nL0JIkgmTj5f9JmN4hyP8FXDIGnOCnroGSnk7buBf5jIn8bix3WbqeYszmX0P\nX1lu0UgUFi37FD5Uxyb8TXkQ7ChA/JXiin9vbcPx7pF//AZWYF96wmHrsD5k\nF3vdCbep+a9z0Q14EDku4uZuIZQKCWvC2SiFaX0Yg6IeWq7ZXgpmMuRp3RpP\nN1m2dxht+LSOm5U5zzzgzQZmhMj7W+RfdZxu16afcMxHSJiFvRxHa4OB6vbn\nFlkBGatceglfJ8NZbCWOXgSNj2U4c95ohvGR6me8vwusNjT1f9SzWxNaCOIp\nFFCUcthW14MWMCHsOT0dJLliZFT/tVTysPtlbbacobJR6N386LonF2paVEqq\n8q6ctgl+lQszCDLIfOl2KbGp3ugnTYvYDbNeuyiwdyDSUEV+bCQmazaWYhFy\nY2cBY6T0MrYEmxaoOPFpE9JrfQ56/ZzOhinVsLQN+iZ1CX/6tPx63wCmtwTT\nXPdwYJ3QRzhiY/CgmQCkf2+7rK0xLD18rMUWP9Qxqwdq78ocBTgJWV/AmueL\n7l/TeUcZg3LTHALhGabvb5ptrSxTc1ooSoa944Qz4beJC2oJvmc2xdmUghk+\nVXqf\r\n=gcPh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8KVg4JpkxK15tkR3K8Cz2DUPV75RtXON/mxuRFTaeEAiB1ePWKkpfUAPEnEGjTc3EFGVv0ABd64q4vNee0cN4FGg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.86cb4ca7.0_1626197867836_0.2789109768829039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.bc9a724e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-ripple":"0.22.0-canary.bc9a724e.0","@material/radio":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.ea77795b1.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qnl3f7uNjfVWQnEC6jsJUgbQwVrPcHd8mOx3lEaMMWVCv1/grIdbC2eJrbsOLFWQ7qx1okXGny5LJO34t44lcQ==","shasum":"ff00112c927480448579d348501c1532e1426492","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.bc9a724e.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6HCRA9TVsSAnZWagAA6oQQAIP53l97NWJmht/jBr89\n0XVJBawkpXAOpO9oSAf7AGX3CNruxyw7YUrZGBdpUcTuw8feJ3/+ioV/7nAU\ndg2MgEQEvf0YG84DjrIdWAIkkUORf++rtIROl9EpIufPKr9rH6jd0sYv4IaJ\n+uZyxKcTIBTJu/y/i7yQgsnXj6tUYcwt6KXZLzDHFFFBduX6CDXbdfdpEGnI\ndAnkajfLPsmPmO/qmFKanvlTQ7WXbgoZtnxqkWd71NTVWyFfngHfhzKXnvkR\nnEVftwY5sUkMEpa/E3rcm0reynXzWCrsq3LlYOA8zG0IO9TD8XYRfwfgVRZM\ntwgsji8JccoE7C1KydtYgfKUoXKpysDsfoAD8wM4PxADF3cUuSlc16r8zs0m\nA3+cME4gK/ZBbhUrOElcPFsLXk+g/PoW6t6VBkJBeqDoS8qFiY1Jdk+H5qP6\nEeTxgbHebPf9s9MQFcrEnMs4P/LbaUA5cfPNEjaaEeY+WH3jVg/rlc61/W5U\nwi6QK3KG+ZKOX4Wmup0bDowX0QnYqc17/YkZf2cto6XXGKYiEn2Pt9gc9nT5\nWEwgTWY0RvUorOqtNQh+9LQrhHiNu19SiAL7q9rf9f9txzpQiAtMQtul0eQ4\nb7GsqYjMKNwsSFsDjQrA/R4WSfqRSYlR4wVwarhsmanjN2FEiGLjVVtgvQ+Y\nvcqd\r\n=2Q2o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEFnr4l7MkRbzQ7KD6sa7beszuGh/l+Biz1FzGMKx8zAiEA/FxRMCx0p35Vn+rcSauxsQapnRW6YN+3oXo0kBqPP8w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.bc9a724e.0_1626201735317_0.34884335154691937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.7847b83a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-ripple":"0.22.0-canary.7847b83a.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zmtMCXzdqGbLLu4DUD4fFMJGUF6Yrwx7fcB3Q6N5F+fFMehOcsgmaWVpS93UWpxL2r+b0Fs5q2UMpdVXDdhkpA==","shasum":"fc6e79e0900f10d0d57c8e4b675c2987b32ecf3b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.7847b83a.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xx7CRA9TVsSAnZWagAA2FIQAKJ+QAH74RVuiMwG11OL\nO0qz2fxhRXqAosAoSRNeELU5YmTbA2Am5C51lLNBxChUugcrWxTm5AaSl83h\nPEF92PDSTb6fo5QLBUS6qygtN6lGJPl5CyLEuWj1Auve70HNmFDYdfWvAYJ/\n+vONpGBNLOcWLmC/Ko2lrrAgi2GJdy4ddFLgeyf5kNeFLqta7xi6rn+4bDzs\nHCHOlk2KDFY0iwz9U7WEAu/1F+OUr1Ib7mqMykAsyE2BIejPMoA/Tq6PX7W3\nBDCrRmyIVWA3yn75j9GBl1WCZxdUlipgTlt9cTfXtKvkQTQkMm66SO/zk7mV\nfxTIc2hrE5iEhDYPds0LK1R5KLMduqDmJj0SCPID4KOHFi7U4NVOHlV7GZag\n5nAGzzuy/lMjH+9dHXCkm+ro32mQ5I5BtMV2ldohCCqkm5LFkOGDEBbBtztV\n2ivdee1zgvfCXOODXMZ1fHpGTP/xDLXb2BwypXApUtH6oU6PZdbI0/zfd/Qw\n2Y1vTC60PpBf2aP4MYLBqLBxPUYH/nP5sCKR875lX7Lu+WgymqO02FGmsMAb\n4ng+RIeMj5l21G/DxAKeFIz73WwAHkrppT2/zWhkaBh8hzi7+H6sZxcVKWDy\ndHM9yiv/o/2Ub9E/5+G0iB8PBgn63JpjFSfnoxwu9b423gCgUA9VeLHL8IUW\nx4zX\r\n=BWVP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfPyPx673VcEBlK+g9sb5YPc1aCKIoeBm2XQcCJlfysgIhALsy2ZWVaJAdmH/vqY1lznfYxXQDWVJPj3Her/5gm78S"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.7847b83a.0_1626283130749_0.8861926776042841"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-radio","version":"0.22.0-canary.8cba18fa.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-ripple":"0.22.0-canary.8cba18fa.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2hK/K/d0BoCrBw5IZzU1ouqPEHDOxg6KonRyFDyLSNUJ/xlpAj57qvY0CkEVHF/1BXBz3IB9IwjfVRFRszsWeQ==","shasum":"60c509e41ca0b37f3ef0e51bcd750e4d2bef8b39","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0-canary.8cba18fa.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70iICRA9TVsSAnZWagAAwSsP/iVxqzz+kx1lj7lChU6v\nF9nk87AqTtkkBwDCPxDFg5E/8M6IQIFmxdpH4tYMui4VhSCzkuDISP7X59YT\nViAAKZOTygznPfaCNhgAMQXV0lEJqQjw189UnprtrSUAU5jd16oqlEZRxo9c\ni07ziuDtHq171/Dcx5/UfjBpsb2cTVEm1UbfKAkM68ZAmPiTcsEWixQJvJr1\n84Nq6gKZOu4C4+PU74JPdPrVwhrw7jLsWTOZ52RY17wGajC6ei8X6l+zZyvM\nxmL2XrDzKEQtV645ReycFe89ZgBLMVWkoirVsmKmNoLfk36rqbTZztK4OVJ2\n73B0lbZAuy2XX5Wrz85d2rYHAb/vg0v8aAmT2/9ZrmVW8D1qmftl2j9JSQNh\nKhFNG8WfAAMKow6vwx/jaqfiudCcnAkTPXzjO7LQXpz8eEe1T5QCVDmyDTSc\n+1siNyZp8m+EOvwsYAphIkly5jeZ8JfBTOTR+ftoVZIqg4PLYe1Dpfa+75sy\nnhQQsn9zChpJ5hdQxumEi3IyyezbAskCH33lF9L0huypppSlbNd2WWHMXIDs\nLIv0Cz/2A5yxZZlPwBs/oNUMhAOMs+//zkoAQmyhISG3D6823XQ54WS2ZeCr\ngF63s3Xp10bQ2vCtOwt+zwdHlzaU7G4Zpi6FVL6TbT+yCzQIWh+nvMg/zvHa\nFx9J\r\n=PCw1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/cUbADjqImORd6VBOzUxbwQWMlixXdDBLV/3cyPhIywIhAOw/+m/LZLkj4IYDbvBkFIgP+GZ/QSZyIdg/WrhON27g"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.22.0-canary.8cba18fa.0_1626294407678_0.7455089010168117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-radio","version":"0.22.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.0","@material/mwc-ripple":"^0.22.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-3cGYqHDymkS3Qmck/h+shQ0u6YW0ZD2XDlXgsyXKWzcSi3uZwdoTF+MKUvMQzHVjiwEXbxjYDWXpDtaiL1gC4g==","shasum":"962f886a1257f10524329a9803d11ff9a8e66e62","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.0.tgz","fileCount":18,"unpackedSize":98248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72d/CRA9TVsSAnZWagAAjKQQAJxFC5ySwSttyP74g2Fi\n7ldhmKYxV55VGePbG28kChnLcwl2pkDBHwYkmH27dSkRh5vsJjnSW/rJHjr6\nDFq7ziKkdtKcr3q81jxkReIHInuQBo47xiHh9AE3wJpngcLIxVG4AoHfGz5r\nZ1s944cU+JihsxtmaL/gwFfJKM5/6FrEWA0Rv5m0CvOwK+kUDVNPubHLSKWb\nt41UXEmAy9JHtGBr+hCKjPhgzoGGnGSBntJ+pb3R8YvP+tgg5Zd0JcO7dwhB\nBcgNPuFwkRA9CmzKoMrlBvpre8tJlNXu24ILwBlmkoFgSU/WmRe1WYVlrdkP\nGkNQ0tyTxlE0Pktaomcsh8XtXVkA3OXxsJUfVCKeQcxnJGaKQkjK9SnB+lPI\nhxi3V66orN3dHCC7Q+OSGRmtTz1PbcYA9Pl10JJpCQFZyEtX+7FLHYSV7QNE\nB4Uiga8BRCtM6kJcuX1i51DNqYwJD4m693wsiNFL7VjG89J4K73QD/bfZ8/x\nyqGryFzxZGpEcw6HGK+Ho+elGWJXv23rlzLw15GglY+7XoTkIGejGax2O+lE\nhsBARpYTXUlD/g2PvJngB5EB9A2k5TdTikqbMGI0oTICdQvVawNpQtkiWACg\nq+ZZYzvV5M0zX/94TJM+NsCaSchXWPkmkQSM3ZlqXdd+3RLx28VfpJC9WBwr\n0vKa\r\n=3FDc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVJrlCYO0g4XHYFB0Q78N9znz/lymmtE0rF5uXk1hXLAiEAhEdkCkiaR76j16aGVa3EsMx0ph2wJh2QDdLMlqkjuzg="}]},"_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-radio_0.22.0_1626302335469_0.720773704814903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-radio","version":"0.22.1","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/mwc-ripple":"^0.22.1","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-pFVuDl/bSCK7gVXC54Lsm6lMclt8MYk0u4yVsjaEUTeFk0xMK1ZvoXifIkW0IHhAJVmWgGpWX57wSzLrRZbUNw==","shasum":"8ce674b9686a68673486a46b5a90a101f8195a31","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.22.1.tgz","fileCount":18,"unpackedSize":98248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rFCRA9TVsSAnZWagAAZVQP/31PpXe2edE/uJCsXAlG\ns7ZGB3rkuX1dakc74P1MTdrprXvjg/dziKs6gGFZo7Y/Ed0By/dOOSLUN8LG\nMfPe2VyK+AE91Sl5sikQp4pnWy8Z8Nc1rg47/pndOPl9UmRhqB/NdCUTw++i\nWHf+Wk359QTTweFJsRvbc29SNAJhc6bosubwkobYoMoW3oLzyMq4LkbzZoHN\nbAFesX+Evn1zo+aOjouGrumrsQrL4rr3TMgpjFFdjguJqgbU66uXdOsdqncr\nhsyHe2BxUQveV/Mp6te53xbTxcWVsPPaurUeH6fYdeTI8mVSx2LTGnM/ui+j\ntf0vF6vLfVCxYjWd+g8CEJuwH6BPaBJYv8H+TAonJ1oHnsCny+RJja1ckQDK\nwMrh9Ozk4KZcDtjdKT7Xlq6fPGTs0HQZC1dwa7z5v/YCOoAx+IHurWtvhPNz\nVQu6qyLzNwOILQpUM/belsOavwhanVTJPtj1YdQgO556W1PG+paBaD/hwIQ8\nO3AmVSYtv8lS++s8g3Q11UBKX8151qGmfjlH2V0cc++NospShY3vucd6XUof\ntQ70ROciPK/ofQSZKhaJngql4edHoYol6r53FdUGQCD0iNkXBFs1o0tOKMYn\ni2K0JH6ajo3oBV1p4sMg9TQKTRFyPqikIKTwNS2/E0qYiMKtDRIW85LC3cYU\nDQP6\r\n=jW3/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJcqi3QUX1eDcIo8ekFzxYiuWBuq2n5jG4xiXQmN0KMAiBjKowAld8cMaBxiA+ydrTKCB4uVD88H6zeSY+QZK7VSg=="}]},"_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-radio_0.22.1_1626303172875_0.9169255297396377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-ripple":"0.23.0-canary.fbc09b4e.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-odQEqN1BPoCepkJAsON/uk71k2137SSOqzvqZkMTXjZKgt87voYcvey8RrmqbvIs4BYQkWytDykJHpCzlfaUUQ==","shasum":"1a538e8f65483ff3890ea3ca947353d86fdd80ee","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.fbc09b4e.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72sZCRA9TVsSAnZWagAAPH8P/jAhq7LmVuwuIFgGEaOS\nYb2sh+Y4+UTWg2CymwIoXmg4mbhcsCRm4pbVQMiT0ExrrssbXl6TpDgLDnLn\nksv45+4lAG5U1uMOyIPmCN+RxmBwENxX+IPmJxLImkEnMcfPa8P8hNsmLOL3\nOYgkJNxG3GKY/vKzCZ+vZYzx0WKG1lAZtewTsbW8owu5USet4a8kbTLzVJfg\ngWsBnRgeti9Af/ZUWgrNH2ccdLrj+qDHonDZl3NLMxm0ia0/Rcbag+ttG3fw\nKG9QnwVLCFXwatvBqtUXF4Zev5URMPvDf75s7dxJRYpIrbccO+/zRlekbxhJ\nQdyDqVI9GMOSBoGq1FFBdAONu7YWYFANM+oI/TxXZCXW+wB0gUDAWG9Oeck5\n/6s0XjkwBo8Uu4583o6Q1mC5o93GLcL9a3uPPYn9bSsvZxlUn5USsgyJy/TW\nacSC3y7vGjS3+p9aZ4huHaEOIZSE5Q+yWD080L08PFM0zpvLkqyWAyvvgCYc\nvw5ZIUu9oJjm0QbBAk8uyVty4EonHZm4CH5ANHtfiK1Rrh5EA8c2qgvYyJ6Y\nVyznGYOyx7JgFHr/S6cvixNoVOe6QfdxCj8+NiT8S+3pP+1DpalX9W3N4hZf\nYTR6pymRSC+xljJ03Av++5/TmxUjuArCwVkUjlAbfpQNmX98BvRXhTm7dMfE\n55nL\r\n=VrHh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRI4FodpcrBenYjtK3w/lXXVbIzexJdZJUas/xyavC1AiEAr8ZR073ptLbxx9EEJerDCeR9s+ywmXN+6X2JfylmnFc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.fbc09b4e.0_1626303257085_0.42386523684860244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.73e9f83c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-ripple":"0.23.0-canary.73e9f83c.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UOcSxKyizGCbjQPFI0uwINkTSE3vUZ0STHhQoMQTvALADnoGTZHZivboQwRECamhsYcqanXwjRWTFCowsS2COg==","shasum":"a926d35241966f7d5e89b7211974beaa33277a2f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.73e9f83c.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0PCRA9TVsSAnZWagAApSUP/00kGcx1wyNCrCQMvS4f\nSBVsAeO+LyMnUr5k+hr3G5+V+G4NuE00Rv6FDT3B74pK6k0aV5o1mD6m0DGC\nMmisL3tBFqzpKVi88m1qYt7CsFQrKmpu/ZgxqQLr8Gg0A9GG7fGRVzkRf3/L\nenbRol6VUAwkqV7826CB+80Dm3BC546pcQJB8BlF+oAy8FbqkWu+eWBuWZT7\n7G7cEkyMdSW12mwXpsg+dHXVOhYZA+fZlEAbXo29dnzY7jjKHFUGBKdjsyMR\nye7RGJVQAt4jeFWURn7avB7/H1F2Mp4OA0dT47/cKXii9iqv0oNZvG5kyIPw\nOE2X512NicesvMBujmAclIh5YcY3xrwaL8a2YUR7Jlf9umyqsPFUHKIxcJOG\n4CZf6TWX7WYc0XAAxBFEplXcI0wlFntuNRa+qSckbBrWaE7QepcYaTp0JqCN\nOk00xPhXNRSExnHpOadwj+tPw1HyaoN4RPaRlQ/EDt/NWXL43933Fq8IU/r9\nzXJfr/nOlLSZ1Y9Gdwl4PcTFud4kDEIVBUoCq1rqHbeJzYNRHojEq0ZDsdyy\nwKRFF6x6raYvV/wHU+dDqCuJ0tRSmf809QKngJzaZewjbOJ8uRLjY/oLAfeM\nWXxySyLWBMzLt15oV4ej7xjq+rFiReBM5NlGO+fK2teI6IVvfsWwt5sy5aGp\nhFsm\r\n=yLSO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt4tr9QFkpiEWe9suhEoAHrqzp0YUXOp6BtyAkFVJ/jgIgbkGE6Letaw7mkM+JEhBsYPuvuUSNxwXMvil18emriMU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.73e9f83c.0_1626381583216_0.6324062814911791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-ripple":"0.23.0-canary.cc0aa7a9.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oGqyZ91FJjaGCM3knCvHbrBxOF99wukECOMElysPwAIaQrdg1xFJWvMw9BLWFhTsJMSRpTG656Mywz7yu7okrg==","shasum":"7a42c12a76212d9cb2a45f7e92205a186d5e3812","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KK8CRA9TVsSAnZWagAAYMYQAJFhpVvYzhQLVH5hlqeG\n5rG+pkCM7O7hjsXdNTtj1ydIX0i3uAYa4X8ieg/2h88KBxygIkcLm3rdZDQX\n346il9OoApi09ZihF3JBh5u9HuQ6X6xd6ApoPK3VBr2vFMwoivsfNOjYLSds\ni53K5nuAMPmkh/gCmovjrvQbmD9lSdctfpBML11Wvhxy/wuVfB7XK1mb1S1U\neoIC0kJjP6dtHrg/ssKAQkRlkm2Dhlh/U8N1bj3QCfq3CHtbdwzGw4Wl+thL\nXZbc6pwJ6JibNqo4kBg5VTA3rcuT43hTuxx6ZGMAW63Hs3bmyS4mhniwDHGW\nBaT2Mh8HxdoATg+2i3F3RCMGssoIEG7QiFqT9rhQVyeJqSYhuh/Gw9KKpVnJ\nER93Iy+y1eJRqnMALCoAQzR3/HuAuTv6AgznHmtJxhLWy2d9C2//GDjOFAYV\nBI4XEZ1h+mjNt/ekn386sXFJz6QRnLeYtTAwyEUkjD2C241bkybBFcqCnB//\nECUrCeUveahNgV4gYbnt2tmI7q4J7Avdu7eAIdg35uD3VFKubGJLkWtIWxiv\nSO1bySO18EFR3rw+OJu1hn87AnI/Z4w7IOSbec8DR+B0Cqv/rBXZ98sQa8kV\nbJoC9GZRhYSWpu62iP0kDHS0Xi7U+fzQTkiyKgwmWhFx2qNk+nRIvTH7chcr\nwrOi\r\n=7TZ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/5EQiZs+9NsTbjW64GAr4HqS1x5QnMQvfLElG9jpH0wIhAKSaX8tD7E+aq8a8IOnbCzYSnSOeez60tPBb1frjvhJg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.cc0aa7a9.0_1626383036327_0.09541952679142196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.a8fcac45.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-ripple":"0.23.0-canary.a8fcac45.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Wz8OYwGc0+iTHxGhpJ6sqY7geHgjfERm4wfakK53sqcDdN6GLi2fx/HzNtKwA3sq4AlXg53wTwkX/SniY3Sarg==","shasum":"72dce9ef481e0371e9c2aaeb02684951de9857e8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.a8fcac45.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcpCRA9TVsSAnZWagAAEekP/0LbQP5CKb3hwEmV7fuG\nJ567ocnU7M+N6raOsFJ5Xg3MvFkAKwS1uEbpJNSJEPFkoXGtsrjREcGxd100\nTskA59FFPsDVPKKxn2ZkAeBcw4tOChe87DuISlBZlR+W1KKBqqLMvQ3dFFlx\ntMTdcxlXcKjCgSp1N45qWq2Af1RChlFEX/Q9cxZEGwP+ezIALxIpmf3iUJZP\nk+olHM+NA/GOXXdAoFtlfxQDpQS7B8clH6xiYf2p86PiwiLZ1cwC/ii4lDFf\n2YOQRRr5kH7HGyRGEBUVji0E/QjANt1TGOa3Jjt9T94y4ZQpTYX50ps2JN36\nJiUjCq4wfO2ITjwnQ+dpHEBIF5MZx8WX3RK+h/8cDEquJed80TFra228Se92\ny+eQ3Ran1iBC9oEeWLP1LgKJW0anCX6Ww3TTAc4ceIadV/x6sEa67oRMbI0E\nEdmeflIytbmNF4+hQeQcHzae7GINsYgcp5WUcKw28Q5loVHeYtmAJwNgejyJ\nHO4srnu+G5GUiRtOVwQP4vk5XpOcbNYd6oXt4JqxRrbJd19HbwDXOb/mScI3\nXnMtNzwiD36jruqmXG9o/UXvd3GL3GX0v8JebyUykna2QXP8RkSnNjLg924M\nYtCkwh/xQ0xd1icCz7CLzeO3+8ydeWlv0NnqK4qyNe0bWx2Vp/m2IKQPVQcE\nDoWZ\r\n=KxdD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoRawK03rVgtCfci4E9vmzB5/4GFy5mKcTfsj9EN+bOwIhANHYpuoG7I/fS75V2NZh1GiIhDZfc5kh5TQFTiqa48Ew"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.a8fcac45.0_1626384169196_0.2749184937511957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.3ca580d1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-ripple":"0.23.0-canary.3ca580d1.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JVEEVrjwhHd/1oIT1X8OoDxDY/9bTzmtQ9Z/YHYzaKPiPbXvJG7Jykf24FH4SKUjPdKoMpwL1t45WefGqSOKmQ==","shasum":"cf5f681687652cbd9567f2ef4863a10955ad5991","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.3ca580d1.0.tgz","fileCount":18,"unpackedSize":98300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDdCRA9TVsSAnZWagAAhwgQAJ1F1Bvpi69TDVE1XM6G\n6up3cD5cToC6hauu2PKKkcGIwpSNmsDwc9ZXSaZAXjst9TkK49ro7hqqINVt\nSIXncoLhbzsHxHitbkVAvoL2BQ36KVeMwXFJYx7rLNhqQtZloIRxYnh51lMc\noDlHXo3zZEfKhde9Li16xrLcTbUBAzH6681Z24C1NyH9JmKNIjtHjhX6gF0b\nPsDGWd47rcqHTT6Vd/lTBFqN6v3HDcIachFQIqYrT5y8/vx+zqgsRtDB66vy\ncEh8e/w8ttc6OD9Mb4LFt7/l9dY0KEkUv59esUF5XyvypsWoSInsjZtmESyJ\n0eVTM67ezV/R0mTCydAkrzVy1Sm0SyELFpE9QETPEhRylgE0kelpMBX4cx53\nwe/L0e+nV1lrRThrtaBrCg1eTRFUlmC4aIkK6PckxxbUTscNbPdU/GXkvE5i\n1Pg8vLDC5VEla6Rs9LMyTAflRQgEIFMwf/JDNoY+emN730kT2g7153ffGw75\nE2d78T9d+zRlsDfQ4hz+nez/Lw97yA9GyAHzhe0tlEShCAAqTJfP55cxFL4+\nzObkrT833yDf97KVRAQNlT4wy+AYAZT5r4ujgl6j5Kc6rVDARSMcLEpiu0fD\ncZF3quYH8k7HSU0TxOkWBP4XT/Mzpn1Msbrw1prgJs7aLUyMs87A4sYz3Vom\nX24J\r\n=3+ln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDleaL34gPaQcU2j5mO66FekvITv8HOLa8RW0icfkgjRgIgUx6SLFzygQiE6ZBHV0gsXjosyw78u+qPZJHOYmJZWos="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.3ca580d1.0_1626386653820_0.39959497851200876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-ripple":"0.23.0-canary.9e41cb2e.0","@material/radio":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.22d29cbb4.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xdlEkt2406Z/Cbe1RuyHG6rY5QhMNp/xZxy7VvRjsGtuwP5T/YHaDc4QnuQc7KSrd7DgkbpimgnB90RfRsAgGg==","shasum":"b90c5f1592331db617a11d4849f67fe32e75d19f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.9e41cb2e.0.tgz","fileCount":18,"unpackedSize":99154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAMCRA9TVsSAnZWagAA838P/2DvoKK0Rn8uDA3ab09+\nDwh+EH+QbZZEnNHPpYRa8jxNZDzCFSx2eIzZXxw5GYfp2Rc/TO2q6UW+0+oS\npn3eyRf394BWqUg9aj/JJVAZXU9bGK5oQTH4XeJzlNzZPwXwZtg8iHa3eedW\n2ORZlWjBF+PoC47H8DWDBCYQHzALC37s1aKl2I3fBGbuBADrVrMs6Fw6T+pO\nUpT/Vl2BTIez1INVgKEd3mOBs3m1n8uFXQrbro15aBzlxiCVsuGAUq93ngHI\nc9oL/KH57QqVyWEM56kDk6lRpxHslGfUZ7VkuSOhlSzaF/0/7PNtEZTQHmeQ\nkR5+3u4z4k5Mp4OphLAICQOvl0cqUf8mGPTDKU1vqL1kFHwQ7+XXIa9vkv5o\nRxfB8YtAG0AvSUDlLXaCspnuN1rs7UlkzcBz19EzZIrz0gJ+4XGCviA9NNnL\n1FROASD/D6aJY+t2evNFJgWFuqiBAX3BV4ZjGaiZV/9nLdBE+3l+S9hnW9ym\nxhRBdkMF/Z64ZoQPm2L7ckb2PMw+MtRObmXLc4qSvixe41Tex7HM4B9qjBPj\n83jEZ+1zdORaLegx+o6Wuwf1XcaG72vLLM2wcgic5KLNzIh8B23PxKVoYkTy\nqV/S6VbqUi18cLqkRjpaf1D2W65G64F0mppULOixTdQT5DTtzqglQQUBuUrU\nO2s9\r\n=y4vh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCr4VYoIzpN9WeRO0XB9cWpVfL0x+HcDPLdcna4+bg9AIhAKFveDaajEKkP/izfQPCOsPLLX6UmdC/avedCie+Hktm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.9e41cb2e.0_1626390540546_0.6760539531150493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.c180db74.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-ripple":"0.23.0-canary.c180db74.0","@material/radio":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qHwnvGSkGjOtUJGmtV9lgt1RFCb4GZW8QqvGt8Ky6B4PAkr/BDAVYRGzru/gqvmX/JzHqxiJqgRp5BFlq/LUIA==","shasum":"906241733cd773b6d99fc691817bbdfd688039e2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.c180db74.0.tgz","fileCount":18,"unpackedSize":99154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cD3CRA9TVsSAnZWagAA9XgP/i0OLbwa9epO13v0sN/6\n5D8A3BIUU6jVaYomFqvmF70jnFl59ewEzYFMArUmRXbWJUmvuvQDu7GcF58x\n9YpH/4j5786ElZx4dLFWJiAvFanEwh2pXZuPDRBglY4hFvJmMFhqeWIsIYHp\nnMHPPF7jtRWGctZ/UAxUiWUlxgaHzavpxeVT5t8PEWClaVF+/5UP0RjgZMCz\nFTtjAxo+gxo/rwDcgS8YHUpMDccUpTscVjiK72ebpktNGGFQ9myFbbcWmTK+\nR4XLWXZcWEd9OGdxKcBvyFVzdqOZv0jfCxszurhGsRTbAB8m03i192htk8+4\nqK/8pRcPtYtXAnMCvwqMPAe61GAIqhTgbeIauO1kIrgxto87LYRceFjXXJhM\n2fpfPNqSvKrZ9xIs2khgZBRoAkb7/nffbABA1WpT5q9RORSz1GAL6Elt0is7\n7sejtZI2VGmJgiGe0P5dJvJv8RZeOpF9fDoURGxlfKJyyG3En5mDSjMOxj75\nFCqCwDkP/zY6TuaqCKu7QONHX8iBhUoGFHrZE+1PtXmql+CrhnbHGJPoaglA\ncGCoz3CiGicQZM7kYxOOijfEqUHWD9F5QBI85il4fTmLYy1REwr/8+UDDFTv\nS5VMzh/ys0cf/ZcrsOsExU+AEE0OhFx9fCHdkegNcxWNqMDmQ8nekR+FwmNP\nTzpv\r\n=kYln\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECZl5q5qks1s4x7LHBr8EoaXFw+uKrm0p2qvGsUiC8vAiEAw8IFmRtKivS8IrcUd7Boeo5t21f2hGQe8fby0yNFbrM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.c180db74.0_1626456311753_0.7304478641407717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.0d0a9267.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-ripple":"0.23.0-canary.0d0a9267.0","@material/radio":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b9oj5b/meHzb/N3ucIDN9upohE0an5/U3kN+UAy179CehgbLI6e2GhS5pizegLZ9f1a1Amz3Pva5Tw/BgAuMQw==","shasum":"14a0e98aaf1e1628244cb0cc806c60dbcb520057","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.0d0a9267.0.tgz","fileCount":18,"unpackedSize":99154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ciGCRA9TVsSAnZWagAAuU4P/1c+eyQGYcX8FyZfEEOX\nP5+fZyg5OTiFdKeuxp71C8dea3oHMZ+gfeQ4sEcD0tpq3dINXt8Hy11C2iZW\ncktZ1MfFJ5aCRBlvNlDIxAyR3j7k5aplBV6GsdI69krXxUdKI2o98vxMJCGn\n4NeL8+euGlhATJcOFGwSwgP4U9P/Rj0UHhDJyAkDx6iuTdVUgr4QFICK+F+y\nAY8owuOOzJag90phntQbgWulsaOlGhUxyZpdaKiZPq/p7osYW2rxcsAkBNkG\nDg01qCwCHGyiq7ffSgTms07MaGsh0OjKXwmDmrjp6OJ6ixVWZ1FCDX+CTgZA\nDuvkLeRgzEmgzdEOXkqyYAyJWcMnhikE6wBkwi8pDB6u3vSUtxnTacc2wcaZ\nS0Ljbd9WyDX5s0Q3JCPdFDx2IhAnZTqB4xyPGvEOV1UhxY+9XYuYzSmZTjrc\n6nNy1FiTHFoSqprm3rln02sg1I4NsLLWRngjrlly1NQMd8sPfLEmQU/ZbD9F\nNO3KD2KQDYwdmkCp27lTLFwqoON8zMmGF4uVug0/LEdyLejc513Ge9uwtkM3\no+of9O/wAZLk8pCLEBuuAzS9hC3MY0xmXDB8PfBBxbZun+zx+AY8Xdpi1nU1\nLVTlKWHxpfjC2MVewz7StcmX5qY0JK0Y7yE6EYBKVFoBrw5yvM7fnQHGfOTA\ncX5E\r\n=ZE03\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKcOcWJseooGz1oBlsAH8hRCFozmYEbnE6giqth6LhxAiBfiP2jdxYDAFhyyhq7Mco1pBIL0KdDirPDeKK0bShqLQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.0d0a9267.0_1626458246594_0.8297860643230586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.d234ec3f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-ripple":"0.23.0-canary.d234ec3f.0","@material/radio":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0XDwhGFUeGCE89lNtGA895KHRJBBqFdOW52tYt/iOAMUa4+fqaLF//diGZmTLwWBfprG4+E/8Nr3zGzIeuunEA==","shasum":"8755c33eca7bd54362b459adfdbe6b4e42f44170","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.d234ec3f.0.tgz","fileCount":18,"unpackedSize":99154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cr9CRA9TVsSAnZWagAAbKMP/3sSKNfXzFW3tXIwLZNE\nBuIX2CrxmXKTHJlCoh5LibtqhGDh/OQh+LnpRyn2ctAOhc2pj0AzMpWJoPDD\n2nhg+RdvjguB5Ue83Yq1IbJGGvzyc2VZkP8cDgpJ7bxa7UZqDjJVShGbsJSW\nVNtME9521VIvGC+AnFBJJ+xfkdqiBbHlWPC6/v+5hd+DWSAzSm2lxABtpN9J\naAX8H6LOZERXwImSsLxL+sRLGTB9suAwDGfodZ2N3XfOyeThvA5JYitJPi5P\npFJ0qo7zoDjf7LDNM4N1g0Ts4T9TzRtc4N+PWJh7Mjj6hNwJ/oC/qA7xXYCH\n9Cx4e+f/p8vDRm0F1KthMCwa4SIlH4rex+adMmRYR2KTdZco8UVEMsmOspd7\nfpWctu04io5ZQEOIgUHSOA0LK6MFIyr1EYTMk6YPSY9SzIKtzCkSUGQDHpDp\nqYWE4aWkKIfQt75iaoZfTUcJejyZHNfdUi7CSkIU+hD5+rKsUXBQZL48N04p\nSsKbdFM5gYXoj7VfnZanLnu33E5Q8BlA8SbMJUomvxyJ6Sp23StNaiXx+mce\nNByTNpBao+3Q6GDJWdvzvmkDbBZCmi/Pmn90582OEMZUrNwitLdG4R8bS2XV\nJaWELglhLnVPDQfOEWq6VhNNYYdv9jh4AtAs32u2KvDz1rsrWcQy+Pq85BOc\njNSc\r\n=YsGH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsGOd5EpJ0MRehyp+yks9HhzScJyUayIis/gZXFd0hHQIhAOvxgko6ma9HavV75S+hIMHEPMZ5YHAAVb9xNEfaLM8I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.d234ec3f.0_1626458877318_0.6442937818205918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-ripple":"0.23.0-canary.5cd4bcdb.0","@material/radio":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.9f68a932e.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KhssC+lpaJxUT7mLG+zJFtL4Ebs6xBwwh92RT+f/MjnrjfhNVRdv/59P46+uxX+zfsEbivhqBygOdZK3lBwOGw==","shasum":"2871643ab03147799f8429334a46350d6936ad35","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":18,"unpackedSize":99154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYxCRA9TVsSAnZWagAADfIP/1x834g7AVh+KjyB3bJl\n2pRnrt0iu8adnFJKFn+05U717esO0s1SNFs+cSfMOQcdPSRw/VnzozhLstxD\nnmQdYUq+hjm2ORgDu+I1IuOmlTFhaseO1ogLu9YaR6A5pK+/JRSENjlZCGb/\nSaRdqUQzjVS5FTGvBy8VsNhng/fdoGr1+sQnAyqeOkeN78Gd4zeKdOE3jRyf\nYTgkVY3K2r623tJpLsm84Amj6vack1Nw+Xf6+xkRlFVFMT+ZnIUZo3rAXXVf\nAwmwaZU6K+alaEZExmoH2pNTf/jpahD5qSgzeEZ1RJq0lZ4L5uACtJOaxBTs\nwXYQXi0gWMttxyXIqO2jlzWcYewO9JjE/NBKP4nK+NRBJqX6uT7y2c97C8go\nm1mUeEb59OYMcv7QtIPRAuEXrzIvs4cdI2Zo/Byl5cVkeeIcB/1LLU3USqCj\n/QK5SB0oKopgi+bBw2nvc/ySGXQ5WcoqTlqawJNnpwpwOgIs+rVXGtRuea4Q\n6S8jI+ZLML3buKhgSesGOOgHggUcII45721kGVRznlMqsTmr5vfWdexgM+r+\nDoa9SvT3fpfH3K0nkFbB1pGIC11y+TRdCLmYGVL5xC+JqzhqnS6mbjPHv8iV\n4EHRU2QmRQANIp8bX5A7BGZ08xtuC7ycE3l87DrJCD5guo+0h7UwDwwfHUIq\nwDxs\r\n=aC4/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF5zKWkmAt8iR+2rxweUYFVJetNa+O1gRkcTzqZRSibAIhAOeOjaTF2nx18akwSj3fszkRBUTG2QwUdEv97AAzW9N2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.5cd4bcdb.0_1626469937039_0.22848804186341898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.2b133cb2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-ripple":"0.23.0-canary.2b133cb2.0","@material/radio":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cnxf6XcyoYEJF802gqllOfsp8rZD5ClT9c0AAz91xyAwbY4tGQK7LhoUBZ/j45cg4E4qB2fRTSVOugz/XGo2ZA==","shasum":"825d85185b580933ba39d73b85f2103e83108145","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.2b133cb2.0.tgz","fileCount":18,"unpackedSize":99154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gL2CRA9TVsSAnZWagAASsYP/2Ng8HrzOmdWNJaePNYn\n7KCZm/lDnmI0eh/zFryr4XicYk/DBRB/djHMlfEApNyjG0e+R+2+OHLuxcdQ\n0Hzy6fx12VH1Oz8fXQuF6CoG01m3s6c6t9PFUbwgIEVj4XMLhj9MOsNTFPS6\nRMx/aw+/CGBqrdADTZlOAHVI2g7/kXpPXp4o9SERNF9VfJ4595zGgV2SEscR\nUltbQ2eymdyr6WfzloojDzSsbap8iaxq/MbsIaspvscqj85qoukHUcBEVvyg\nWO8qPMyA/9CNWnrRdI54HX4uIZ9TYA/yxq/NXEjg2Y6f8U3iGfMA+iOObexb\nfCoL71IPpDe2lYyZ76p2dm29suKBCGfTzU29aGgzcbd5oOiobFE/gUGjHwWn\nKqmoZW9j8F5uhXhLoNNPRcjY5rEPXyja/ULwvP9rpHtPBI7FUUx6mcsnMitG\nHfWw3nKG/yzmByDrcs9dqrtq+r58x4GkF7AlSsejuKcY2YRizyrlyoBtdZiR\nZaoHTXbHcgZoB7MixhjRg/8giPrnHPUTouVpfsrqRqEgkhJnL9+W4qdi58M4\nXuu8kOb3HqNTskf3Q5IVxnvMATQCg6CDiqOmrQvr9b9Y4NIgAGSwPeMVlZn3\nbFKrO808gGp03TiolRWw251kzh2iv8q9pZanxdKTIxseNss09g1SYnSlnyhw\nkiol\r\n=qaqY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0mBgN1K+AYGrdCzE2jJJLM40HXTxUuqVeeJ1PzU0J0AIgWANMGu0teGt1JB0e+jNR6VTHjE4SThCPsRH9aIDZUFk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.2b133cb2.0_1626473206762_0.4149647794971687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.ae4f422b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-ripple":"0.23.0-canary.ae4f422b.0","@material/radio":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SRbDNW0O+q5f4MLspHA8uC1NvG2kPTDZ2s52Lf2dBGyc6TYWJRt5MKBUcLSGMvR0ig62PIsBYnz6UEYQSkKKwg==","shasum":"e40dc95218c65975afd9f2391dd9d4fd209e3ab0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.ae4f422b.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwoCRA9TVsSAnZWagAAajkQAIW/PHbuLF9UoS33Jzaj\n4WzJAvXYe7HGiI7DA+KsHbDuEVhiHTbuQGJFRwwAaT9vpnBSydgA+AwD7Dio\nChYoNpFv0EMRH/wM2JD5R/6WgOtwBsxLJn7y0adysEWRaQP5N3coaVlURueh\nq7tgkU/3a8FV04odfGI4DG9+bV7zgwWoKsKVJjQ4KRJPmw8zeHZwQq7DLAaD\nqmL5m8uLgWa+Mpv3tuRNBHLyLyhckhinumiYzjAFo5L9QKpoUIQz9d/ibavl\nFHZ6Ou9nD9hlxI6scpxiU/9JjyB7K/iyx3wjUQG1dmD/+oL4n/qkzzIkbYd3\nvxpwr0C6ON/VEb+7awKxsK2Q5uU3SVdl8e9xPlrbNwAfGwXMCPCd/Nz/I9bS\newzMBUpzVEUaeKpHiljv3p7gUGY039kWFUXmOzURIqHU6GFW0jt3J/XjJTHr\n+TPeUuyTAq2nHio6nFWPogW6ys2Iah1aDFZwGCN3S7ukPRZv3K02QkUeKpgZ\nTr+BbO4M3nTgDooqzfRtFvcgygwT4QP9tCbXxzq937X+qbNw3i8gmHcqR38j\nMSct1eDaTHeH9mzHVj5PTGY4mgPQ9XvC0OsvwYyYyQ9WPCrOpdtzgLJHCKaK\nbu/+mkBv/8uCFbtJwhSlo3ke9X/5dvN3I6MeOf6+EtJicO6kKoX0Lat4L9TB\nFQGf\r\n=iVas\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7+9WkDjWffzgjgWYOGC/ph5JrsHkorYnhGyOUCaa41AiBb0DkrBc2fujKYeu6dLsmREs+2oGKM2/URv9s60po6QA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.ae4f422b.0_1626479655960_0.95627831015924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.90ff8057.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-ripple":"0.23.0-canary.90ff8057.0","@material/radio":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5aH2oLA366KSIDX3R1ZGcv7UiBExHgDJKXLBG9GGw74g20KNUDM1eqqoWbZUEEXYf/djeBKIXAN4eZHcWAIACg==","shasum":"20ca12fec1038493c590af778cbe927339c9ded7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.90ff8057.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9Yc3CRA9TVsSAnZWagAAzYQP/1IMuaVZTjDJpk4bWWrB\nya878neJ54z8Bo68s6nAlD4jA7c+1HhpEwKidL6e74AQiYTkMCTF+WZqD37G\n+Vv83rPKxgq2QCO1UzSSFkhm84w28vLMD/1d8ZnE7GRe3gZyBKQ9UAUZQjcc\nePxV+sYXmxkaxz8Y4hpiqA9Hh0/+HLNleW/BIs/C75X72JIiSNKvPjRA9I1G\nwJmj08ZpWPAUhM6IGoUSM69j7FEM3Wp1Rvq+IWVEVLwIQDtOkjxKFmDFCN3G\nLGLfiCIrtgLLjPOACIexljXjG8AeQSf+r8B6ppJh2EFeJXnm90zIW0bUAXoL\nbUytcCJOAnmaeYAlvVb9qizTIT2sUPGgR2dn3VcXlkPiFoF0LYpYgmh9pf6G\ntwl2UJx2vNuWfbXxaZyamO5KCG3ORmoMcWR/PyG0wVI7s1PpG01YfInuFnRs\nn+wWdvPhR0/pff7dzc7WYfQRWcHPt4ekFAFDLAM93NWYD0ws9o+U0ZD4iw/S\nPps1UA/LzsfTKyTPl3vyy+dBDHDvTrxi3V9TnKOLv6DoBejF6H7xQQiRvjWp\n/4wllTpGFcrlWr8Hgkb7UYD8hdW1P0ov3iDp6y0SgbbbnwwOqGOJ3ooa1tnX\nJDaVRlxNApoOnfQrDz1ey0dV+95zCKL0Eg7tzO737jP1gQqY8yfHE/w6f47k\nOR3C\r\n=TBIS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbqEC4Qpz+pvFe+7dDC3Nhpzyw+xLc5Zvbgx1iUcHDiQIhAIKTWhXRGa9jimyJGlV3gTfRyd6T0Nn/1GZefNvq5kVO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.90ff8057.0_1626703671199_0.7546427405888663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-ripple":"0.23.0-canary.dd7b75d1.0","@material/radio":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.4d95812f9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qOqefILJ4i9AVk33Sf4OB+elLPYAqQbD4qGkmz/HAAC9DRQWUi+21C586ln3fVkAO9TSOR/bm4f94NS73UgYdA==","shasum":"432c5250be5ce7ed88a62f7c97d186fb187f39c0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.dd7b75d1.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bt+CRA9TVsSAnZWagAAJfEP/R3V+VgeysZ90ONU/fal\nkkd6trhTmK0xkia8lPunaVwEGuSXjlQ9RCYSjC/dSWV3uG6g/yWroffaD3MB\nJ2HIkvcZpNnzTkhbqNsLxbgyt6HzDzsERJ7RYGexAHRvkwu2+8h7mwOJ8NUF\naWpbKGhAexWHWxw0aImKgXbnfr50ublJjqt+hqAtHf282YhfSjtw2v0C2NHM\nu7NcNL4TYw26q464GTaESFSGwpLl7yU006fXocteuX94kGAzBT+UxDaHjHZL\nG886MYPW5ferJhtkEIU6Ll9hD1jrdJLhgCo9FzLJPU6Ql+ZN3hDZ5X/ezi4J\nCQVroxeHjKLXLlO3oEK/UxRkhK8PFFwq2ZT+z/zw4FFQX8SQshLhRfdOuiuH\nLpFoiMFpmDEUYmU9EgMCQxW//d3p+VmR9y707N5Tlq7aqPS/sWLkTR9ORjBK\nbZihUMYvYunpvVx+x8++fdLAtOHb/+9fZFEBw8jchrZUI4Ux//xNpoq7O7E+\neR73kScKon9vY82lvmLyJbgAE9bT5T/j4Ebo5fs+5wC5Wgu/vz10u4kxZvsY\nW2pGeoD2qQpbtKw7xqz8zC0lSqFULYCF7SyAJSsKdMSTRLfECtYkwv049s8/\ndthTp8HvX/ZnCGu9NIAdBKETBeiaTs+x0CNuKsDUaS2pGkwE7CUNZbV+R+5f\nTO/Q\r\n=tD3I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqARAblobWALmkklU85DXynlDNCTIxwpnL8X2K8zcciAiEAjxiW8ioc4owiuxtZ8kptLCzi3I8eO8g7EmACEpE0vGc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.dd7b75d1.0_1626717054650_0.561485280136842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.104debd5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-ripple":"0.23.0-canary.104debd5.0","@material/radio":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.38d1846cc.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iAH36WFs7KSsg0o+Ew6PLN2KLrQehZklGulpt4Utick6tGm/f2tb8luREc6vOxxETw2c3nwG3P7kOaEexE7YNA==","shasum":"4f9644cc7387da1322e7f962dcc19f1d58c7f6d1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.104debd5.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJ6CRA9TVsSAnZWagAAK5oP/1LRx3uB5fidiXfiQUiu\nW5a/BCzIjnRUiuf30QPX+HM4kakBMupwpscwz1TeL/fjifK21AESffMISG2f\nfjeZ01IGlpvgDMlGEu6Q6zWyworB7KLUztTNdkmvxyvI0FBUGdze2Hr/7Hij\nSKUk4yr+f1HTYmoXAxfJM0AdrLSy0tAKuNn/3JGLFnqlHTxFQFejeSSDWnLL\ndI2AceaKyzSwBrTjjRSdIeNBnwYCgT5LXEowEE0leBroAId2mPTjTGybPu1D\nz0uK1/G4Qk8QGy7QtfSrWS+xwLDrsWfDXQ8XeVXXCeOvUcpj+J/EJNokTi6S\nJUNzdqKA38LrStMKDJaxEniKMrWQmCSJWQYQs+eMJI/+T3CCQxYbkN7tu852\n7h1MNW4uSeOR5JempX4P9GHjSq5hBZmcvYYVmF0Xh2viCGXmYX0l//6SGb0A\nAJEbjQ8m5SGi5SwuCIqkvOmF/ZvRn/AKM2q6F+T/wr75MYYmUHKWzRmuF7HD\n43XVJV8EpBXTMLk0+cYOK9VoVN1jlxBPWR1YgrkrZax/zsL7D+B9kcaPzbnj\n1dFz3EsClAGyXrBqqM2owAK5KAU5YZH8hZOBzNEg0xmmWPn8xzRjXygY1OG0\nw/Obb5XpzTFeAIHrKJxYIqYgY/xr3VD8w1YRnjBlDc21kH/EDjIKp1cELn/s\n0JBg\r\n=N913\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChiZjQH6YVyDajBwXG0MVb7Y6Ksj5lNn+Uq/Hnh8fMoQIhAPZD5/PSIMaMfHZFpE6DfVICZi1vov2c2hod+eZ+0g8t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.104debd5.0_1626735226416_0.978932512549527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.4612705d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-ripple":"0.23.0-canary.4612705d.0","@material/radio":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.38d1846cc.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vE7k8q4QHUvGAQXgKxKcYNF7iNNuLqzN6TehmJ63lYi3z1sHuipMXOK8UF1D7gVhrbQr4CF1WAACyVphP8IXnA==","shasum":"1fd827fc389bde2db7875b0f3eead29796cc3310","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.4612705d.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQlCRA9TVsSAnZWagAA7LQP/0Z8uTBV1lfyxun7RMhM\nfqlR3kQfrbPAuspMTUD0UTrs2VzhKLZHjCBYdDpuTPkAhL8FdBHFLT/ocVRm\ndoIQi7cRxUEzS0Uda2BZSZf7SkGVwTHBf+OxEZ43FOhJZ9LTB5np/7bsKoRx\nrJgireIrt3jVCUDKlP/ixmkKj/ZYq/8mo5h8u7Bfl4xi9QMsCX+BSgtL0h1q\nHRyNmFghPVntJtlgNnM4GkifT+0Wj5V4MrSAx0ptU6fZ0cRMNnY7d9FLYocz\nGkasrceX8JjBNHDyT2nF7ziSHmBKfhR31Aew9/MXC2J338evwqTn5PIQtSgK\naMANTek7tInSEykjER5/L+YhHLHFXMoI1zj7OdRErYT5JS6MDcwuKh7EKfjh\nJKKBY+P6TMCVCGCp9w0uKQtscsST/tey3+Bnn3RQLBuCHu6nVTxaBjutOKAA\nBsz3U6wQpYncNe6EwOt/3eieB0TEchopYzhbcvmBlKlBPq5RvuHBcltU1yis\nyq+RsHLGoFEsfwckxOM0QiElRl44qQMyVlpaLIA2nd9UtWKQ1NN+no43HOba\nbMaZLNCvOb9Xkl7mnyI+4ZQQHatcr3rQC+WewAqthwDe3pulB7Hpc7sy8042\n/oGUtceUozv9cyTNjRKF+Csfi+8I1woyHemJ9L2YIpLLBLqYUeKFAJPL0eKf\n7/BA\r\n=VZa7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHnLBfrbREjpjNF4ffE++nJHtSnNF6StDuP7D/Ky8f9AIgclpu1a3xAonnmiF2keQFnk3QfEOTblmt6pEfg+pO6a4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.4612705d.0_1626797093373_0.48745814022709033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.b36502a2.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-ripple":"0.23.0-canary.b36502a2.0","@material/radio":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.6b0442278.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2DFy7IXsZWMGrr0Jg0rrmBUMAoKAYJLWdTW03Cwuwrh87u3NYXq1ZVhcaohxtUH4qRWpdiz9JU/VNLSVd8IXvA==","shasum":"dc6b03167e1821b2dac5054f17c9df2fd0826d24","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.b36502a2.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEJCRA9TVsSAnZWagAARA0QAKHhj+SHPd6aDe9elN8P\n3R2eDuSUQdBxgkGHVzWgSLp/8y6V8ZzVhZTN602El0GNB0XLN78RuVOVN4sb\nZX5s09RpZ9ulzfVYeJFxCU2id+bmfgAXLk/N4N0U8yaqmZ0jqe7UheOyxJhm\n2K+yIbbMepVBEo1pXuPfwQ9AW73NbKTodi6uqqxT07mptksfC2QoY/IIGUlK\nmN8yZmDg5hk7XhMzQFOLU/Hax7sz/y/dBleP+p5KieY19qPNtJdTJqZ9KuWX\nNBhEA0A4nLAe5GRM25mdtVtLwsbquqk2DaaArzirJQ/MACcRin2uqPgi+EdR\nNQ6AbWn8+zac8IbN16wcOCKHlTy4Lexyj7IOWvF0IL0f/DrDR8egJIQVdyvr\n42fNoLbjokmfQeez3Ef4jSAsakoY3dwlf7u71+QRvGNKC3Z38W4Wu3f0nOzE\nDeFJJTw641aBbaSfdzu/0NbSkHMBcPS33WYZ7lLyI6b0cT2GQgxwZCKNQser\n9TXOtvhRITjertfNhnvudRloYRHTvd4vG9wmrnlREGtDTiuVaFQjoDnLfTAx\nfhDQdWy7rCUrkk3EvYe/AZIM4kIJMs4MmL9HgV9JqH4vb4u7NER03/EYd5Dk\ng5liwXwkYp3hUStSG5HROpCmKBB5mbEJqEbB5Vq1jXakAlDVOULq6gaRqDwq\nOLZK\r\n=bmgw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBfCcqDy+830Tomf/nNiYXY66dQlO1/6UyxoBYGxB40AiBk/+MvoQCrDnUogbGQOW7ofqemfcryBOl6uyGVk7yHRg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.b36502a2.0_1626906889228_0.261222474731893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.2c392ab3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-ripple":"0.23.0-canary.2c392ab3.0","@material/radio":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.6b0442278.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AvB1GmO6KWjHytA8EMCjNxz/wV5JkJlkBDz4mPAJC2aP+eyTP7waG/3uIVPErFHpOJ+6G3dPBWzv+/NmFyqB7A==","shasum":"b76abefedbf75b856021e27d789cba75369041d5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.2c392ab3.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZTCRA9TVsSAnZWagAA5ysP/1aYj2j8V4kgZcqjaL7j\n9Bws8J1axk8Aw3FRUY+PhUfNg6OjibuTo2DmEUYuBDHuFYBPClcr/7TfBbub\nzWFC5NS0thUL3YSIv3ShtZtdatMY0mWdirN4C82qtSjNQYf4ZUxMYzjVaPKQ\nPw2YiwnOsk3UZ1PkjcIdOh4gP8T6C6qVT44pEriglrCoqdnsTxTl/L43rCH8\nl7bLduxoXVgxLA5wak01sDpwrXoGQE+DPn7Kc9rsGpwFO1WhGL7T5G1QMgVY\ntKW4HQM/AvIkqSJDR5EHqTKITZIj3G7CCIjegtIQQrt6qX5TVzDGuwD0gHx6\nfFSWDJYn/OzT2bpszCQtu0+G1t417Ay1rxy0lgC9TRBHSAla2B/8Zg/GJ42z\nHY2yCz+avT/4igibx7prp2KUQADfGOP35o4cLt0s0WlVHvyfJfRCh5XayJfL\ncOWpVZaOxhrvpj+BvYWNewcbj8Kvy4Mu1Hwoou8aOSPZ46g2Gn/KSdYEmuFa\n7m67Ryrngp3r6WWAED4gGUpvKkjB4ud9/y/34VuPKbkhCkN/IoXfPH9KYV8R\nHoc/G7U+QcsRbT4NmGYqxiRYsJc1HFCdS485pXAwH8dGtBdTn6nJBfmys+SG\nWyMrU3zW1PY8nQninTnjlZcHxn720lNoyyWhxpb+Rl/GsbGsa2Rx5w0thwWR\nWVIy\r\n=VpeA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEihmyvHOQPaw1W8VVScBuKAfFGInU98W7bMtN42+I9uAiEAi9zfcVlqhw0pm85t4C3g+Cn3+0NXKFTGUxXV8ytJhIw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.2c392ab3.0_1626965586940_0.5920433416616866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.e8bac95a.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-ripple":"0.23.0-canary.e8bac95a.0","@material/radio":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.5f00e454a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Yor7iVN5nDtr1iVVIZCTXtOhhFETlGh25ShYprp8i9y3gMVj7Fu1v8BnSdhl2K66ybz7QoHvfMEi8lkl6wf6Bg==","shasum":"1cc600fb85e6c3633e78e3454369aa916f03a920","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.e8bac95a.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6SCRA9TVsSAnZWagAAf3gP/A6qhPDSYNX5bt5hO0eq\nY9SgM+ba31c2ZqAJ8Z4cnwZDh18V1y7udAyVrdYrKGLn0BsXM+3lJmHO68pv\nKdrBrlBrZgkA1v/vcykkKCP7+z1z+YNt9NFDghAwZI8AybrXaHaI5C02lAjZ\nuLA7sUyzj1lR6WHhfxvalIX23VwdHyqZr2FsexvJuqW3D2QvWaw947IPObTS\nKMbLchVh+gRuqtl5rQyb1UcGdB3moLsYDpvZrxJdC/1xU6BdLmthgA2hU5rn\nzPD1atbE1JHN/YODkzbn9mMCybiF1S8AKfd4B5daRDqn4/8HyUQKbdLAYsTD\noX5Xl04+y5BLLE4RCtqeUgEba94acFICfZ9JsHadOASGDB0ng7KeOv1TMlhK\nfgxCc0oLwRml0Tzm4uIFytEf9BzyimzdxnhifADyPYUt1EJZSkj93HVSYmLE\nbagfY3NUGXMVPHveVlCLCkWtcrPNRxYzSHMzMHah8cJJMgywya09ID8z/Ty1\nwxsmCP1g2TUIjYmUVBMZMBGJWRfGHW6w+EP+PW7JYyI2gqu5oZoo26++etKY\nIMakkmmBiyjwdwQa2Aqn/kZyfXgqR7AUkjJAd2QhpNIzD0J2zYhevUKEYT8v\ntMVaxDq0oJqLUjRkRJupfuVvFCRkDT48gc1sT5q/GECC4nvrOE1dcNShV/8K\njchv\r\n=j0Gz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKE1NxAYkfFzBN9obRa/4wcgIt8unmm0YNT7Opsr8uuAiAM45DOSfsywgDDlsLcUBPgF6xO8Dh60dhg5jXQ03aCEg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.e8bac95a.0_1626979985931_0.12352682494641165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.38f29f8f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-ripple":"0.23.0-canary.38f29f8f.0","@material/radio":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EpRIM4hgk9PxfH6uMj+WlBU6APfXcWSiPI1DLoFoQSQ+YO5X9ylVr7LQGE1Q97cBWGoTCHH/GjpNFA7GMnXibQ==","shasum":"08023e850afa93a7cca1808012e5a87214ee7e05","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.38f29f8f.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdvCRA9TVsSAnZWagAAR90P/i2jcMVN6QmCIwO3WVHS\ntV/gEUhmsEXjMLUga6SteUQcq89Jubtizs/RtxE8sj8Yno3mWV3n23weiYIZ\n4/rFSTz8zdWEPmdA/1aWf+6dTPUDVqkguZ0unBwEUTX/vKR/0LCr91NzCwXJ\nX8X0lamAVOQjjjH6PCXBBNpsRIQeskoNIyz6AnXQGJxBKZ7eqD+1UF5f3ECK\nu8uE5cSb7sXGdg2fsjpAGglSoduFRr7ZTBYEjrI6QtUqxX2cy7TA2VCmToTj\nwIWmgaqlle/+CmrkM6w3GQgKvRG21tV4iwOxmBKtt7O5U7iOorGQvkwAyPJ+\naPUu1/O+R0Lu2gbQrIMJysbfCTFrDsJQFxXASQXI7afDRRpA7M+5UCRNZVsP\nqm1Jv9bVqGGF7fKHIMkL6drSVv7Pz+/wsN4ovWmPWXbxrIQfSqJ1N8JPwlrx\nx5cUuOwt6dcHlvYaEcn8iVCkHm2u3muuPlgLqhfMxm3GfW5VfQCca915y9cE\nMCTFiX4UL7iGaDPq76KJk6dAkEFiPiiY4+U3h7UuAs4dRI0xk0xeD+nThtOy\nj3mI7LbkbN1jOq+RioUzc96l8VYmBoDJlbToHypgi6zTLmh/4HLLBs+WvgmX\nzx3wACFZynSjro4VNrWXWOofgQUOypOckGsPpx8FT0VS+opyuRJoNlxHvFiC\nrVc3\r\n=HG8d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcSEYeRGjXFT86qp1KoMS/kN9YuihmsZKjFJ9SqpSFzwIgIkyMXy2XZvIjnueVCmWpjRN/utEv39C0nH3q2x0mGMw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.38f29f8f.0_1627064175311_0.9869103733758562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.e0693475.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-ripple":"0.23.0-canary.e0693475.0","@material/radio":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R6OEGUHqjpQvwqekc6T8+/YmBV52QfeHPrXfRWFWN8bKFb+iWEEvxrb18LlY+ou3FP/fLQQLtYXx7/UadmxkcQ==","shasum":"0a772493199edffb01ad16969e4ad6a5d36b0da5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.e0693475.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDWCRA9TVsSAnZWagAAbpQP/3d2PhAayBv56fLFQiMd\nFmeh9nlVpeleR7EZnUy4DTa35PufeXGKoBC0f39Aqq2hoegpYGuzH8rbo+Pb\ndAI+6WEQnarvyV2KNRyhhGfEsZZBcaLXQ2burzDlUXmuQDXCwZcDv74g5DFx\n/d7C9wYy/uLlYBaAy2zlRh33u5yTH8zn2TnnW7d39hYF2MBjr3g7Sy7rLiHT\neUfIA2OiG6kbC/F0++QCMQs3Lkaka8gAS507E6cYuWxlSVWzrMhnqLfUQx+p\nFakTJJEkvc4mXX5apSZOO6NBOtG/L/FANqhrqth4aZJkdbrrCe2huALxUgw8\nNsU8jAMP0EluuWRW07opTi7LCEq/icNiZobNlIWMxYa39Wqr2s7tQ+BNszFC\nn7a7F1kk+bW1EUvZrjBjgy/aXLbL3LNDWVlZ6EUY0nyvW2PYlcdRcbVwPK+p\nT/rbIhoNCAXmfkEXA7K8LalxCbZ50ywUPJh8wZzzj/3BWygnBMJwVJrWCKGK\nKZKjlqGaLy4GRBz9iqFWWi8yU5qtvIl3zj+ppuX4AgEUODNSEJmRakhjCUhL\n1vsSq2IWRlZo0NJonip7z/Tr0sHgx+tpP5k9YqkKAP4i2AmkgrH0ry+wO11B\nRj9ymW3Eo1nU0GqpanHg34+EF1x6FwoMlLQGtZwfDETgPemJtCxBqtABIAoD\nslWX\r\n=Z4vI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGilQJcmEf++5055gA2Ahls553rFcuZc1FrxYLmvJCRxAiA1n51fCthZ3TQBbELbig/K/M8acGUw7QFm7plNPhMrJQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.e0693475.0_1627066582588_0.8286856427429377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.d595e030.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-ripple":"0.23.0-canary.d595e030.0","@material/radio":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.90e08fc6b.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZCOMmtPjO1VlHuPwXSNxt8Wh8aaWZaFnswnfA+XiFcoM5rWF0ScnE7Kq9kNmaSgt68jQCaaBudRYoD3LxeZVBQ==","shasum":"2e363e2dadd0fcbfb0ff7bfad48d61ebb9d78446","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.d595e030.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxGCRA9TVsSAnZWagAA8GQP/1G4OsjcBJmTWR4C91VL\nIq68E2VQ5udbbMYQ2SLIaxV5bfpDMWMsXdw6+YLmaJQaS8Z8QNoKXWME5NeM\nTZVCQPXVN18Ve+dzwq1dIpkaW+QNzt0UqmLCuE7cz/EDX5O8+s8sXJURG+st\nAKiQq96ItVA9xZqc9b/ZaHhUvXfbmXw2NqmCqf6FFn1M8HRh3h41y0akOesy\niaDFAJdGthabXFDH5LIgce3OdMaJWv4hTPHI5/y4R/LnksUl0g7m2R9b9RiF\nl92uoRng3mCN3nsvUsA9Cmuj4/44XENkgA2NH2q/DAcwQMZb7Mi0kwoi+3Pk\nUUh2ia928U2WF5/erKn4w/6uVzPFrXtWyBVF0zXzJ6QBN3p0VX5cQhVYObUJ\n5bgjqIecWD7ZtmpYn04CGnfTwdF+A1F8LFbH0weT5LrIeB4UGFOg/B+Pjujd\n+GDAHNFU9kACheylfBRaeIudC3D/NdYRC7XsMXVilYjVV/AmwAlJ2Dcq0N7u\nnOhbq4OWjzn+C1GIxZI4S7+rkj9RL3NjO0KnrA/6paelELsJc4yovjuvWDv2\nARU68gwDEG46eWouNMEpyu9oWOaPqfl/sglFoub1Z/v48TBeONd6Mzz6is0q\nVkuW/kttowRnWDJqSyEmhBMHzx7IaUnmBl9wiojIRJkZlBIqIuzQdADxPQIS\nT1BI\r\n=Om2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+7cvJ9BxH0SNY8r3bEquu4VUdRyMdGRQSvEJFT1S11gIgQwqjBGgAcq3MthAuG5ejoVIzJQqjEWa6whusBZsXq8Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.d595e030.0_1627073606339_0.9046878692645035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.fe7cca31.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-ripple":"0.23.0-canary.fe7cca31.0","@material/radio":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YB+l2HBRn4pFFmfnFWQeK++i6BAgLCBNCju5nXFBMZmaZ6ljik1daDLLxeNObMvjhfwT4R1I+RY9/I9gQvxUWQ==","shasum":"7d34e6a3e7a65c1a5b4d514e211419c02c1daf47","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.fe7cca31.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsrCRA9TVsSAnZWagAARbQP+wVr1S9DtthF1jfDP7aA\nAW4hKsEF21a7O8sEPy6nyKk2BnaQLppOuje1xjjIZIzoNp+EWITZIjewVtPZ\nzYbTZ1ear/IqJMcDtwmniW/XFXDBQfGT/fXuuxpS/121iVcGVx6tT6tUavEJ\nyMooB41ZfDpoX6pqZvjE1cTotpkgf1gGOujmnbjPVweme2Y8/XvNjECpSe3A\nbzBdD5ycXKHBMVK0ulQe2dUoJj5R1XQpbc+AFwMt6lCzYQoJZCDRFzHO3NPn\nWYwqyhTMNaNDGwhMSh1GtFvsbk2e/Iwnjabti8rnlCroeLR1CyplbRuT/meh\neScFlI+w4S3z+2ktRvzDrThlGI3GC1e1IfwOZfIaZdxFOR4kiUVXtDYvC8Ns\nnIBRB08MCzKM4keFEijJUzDY8XWxwEZOj200q3McUhLlTPxbyxtvepvvOBrA\necnGyu6NrO+kqVrias/Vtkixpc8d5YzZyok5qQTpkaEQZEKLZnjujDSpNnG9\nxFnmitxTodIBQR0+zjLWeXM4vBhVLfzOk6CcFePmY9B1JspjDhYA0lcGlfBb\nnyv0jeAV8CtV+zjZ/qURXxzgGPeTAPsPPRh8F/17Us0UJP6LbBz2/ynJWAXx\nKDHFAexrt6OX4sLcnKeHbDl+MJXEVfZEHRxwFa8DkUmB2bpo55+zLe81HPEG\n7cBl\r\n=lHhi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5rniBbw3i9VWyykPTQfRWQJqXX1vjTbJI4M2QZlUj8AiEAysd4UT2Y3Bx2K/ZQPpin6cpIvQ4scfQ+Sz47G6xNQ2E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.fe7cca31.0_1627077419497_0.9079791214516109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.fd9da483.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-ripple":"0.23.0-canary.fd9da483.0","@material/radio":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WDytoeOiBWOLr8yN4PPZjX1zVNL4N18erT66R0pXOzpgStjThZbjaMatmX00bXcKCje01uNDSJDcPAWMSjMdcQ==","shasum":"9d89d175b4806390b9ac318a9f0f62fbd0aefabe","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.fd9da483.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygwCRA9TVsSAnZWagAAo0cP/0ilDY6YuNHKxz3+zC1s\nGohO2jlOHWg5tPEYXVPFsDusWroxGJwdSVDa/H/5XP1Hf2Ju3C29zb5Smsq1\nNJ5eMbw3XYqNYH+86LSTViD0oJcbHRcE0/UAMUrArUYFeOfb9uW9848Gk16I\n9/Gt61xDe521PWSIHmy61TLRrqwVpUJbInY3jS+j2GUWtPvZvWpL519lTOnh\nJHOC62DFxCBTQoJntVQB8ryLeRFkLjWWHHqlzHG2L7RJqd7hiiH6HItBf8IM\nkJnjtRQElfxHt1p57FKk+aU2XJcakki5orja3xz7zGey8cNqo9b7z1UNMn7x\nBvFSqpqud79VdV722wg4if/jZQcUMm1noCylLZpSnDvCRnfSNqFMklcmmP7I\n8Z0nJMy0demJ1kJK3M3vVaXlgGC32dKhUwgOaUu6sowudnVho3lxjb6dhs6O\ngCi3Y2o9X+gH88I94fvXoOfBBGpQ8YbqeapQaVdEKiz4iRxF3o5j947iZKNT\nWdcef0xGqAuJNzB6DTe2M9haLDmYA2WMxf/z4cHXUtf8BBvGGxS7U9VWzdT/\ndwo1002x/wSvUt1M7Z0uR6R1N4IgskybRhHw+pbYWlsx3w71dH7s3Jd1ybGn\njk87x7IQEtXcJDWHGctY1NMzqIDL9ey3Apn+vSIuCJPshE/LRcF7Lxe1JTBt\ngHnk\r\n=njPy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtFpsoIBgHB0J9kERFa38HKI+HwQR7eMS1Bxxcq40ajAiAL/8wVr1zqOEPVM/TwTyITSRpXjqKXP1SZgBcrMw9O8Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.fd9da483.0_1627334704826_0.3227477301646342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","@material/radio":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KrCFwaz5blUDVaEalL0tICcU3N63CXeXoM/pGGb+LdU52eVGlpqF+po6Mn85NoCVk/tvUhDVnjPGkPoghpm+Ag==","shasum":"6c67a6fec3df4941cec41a7f9ea1f58ff7871e5c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.8a4c7e06.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrBCRA9TVsSAnZWagAANVgP/1/HBZv6yBj/t+16XKm4\nSzVsxzhwb6veVH363d5xoKqw5rp6reHjDQ6Pwxoe2qQtVeeACzHNx0a2TMx7\n844RICmuY7uzqMm3HrGe4PYuUADEvFLsSywyeLu/8zxBz8o0o8atXNfQcrtY\nP/NLFDMVdQiiGQWKUUrcAu2iozE/KBd+ss4O+E7GznOsYhtzcTcKJKDXG67L\nXTEvlqycwugehQsFMcVKB7CXQDgCiBtzYtFwBaujJsLjy00xrqk13Mtp1DrC\nZp6ACX+XYs9mu67TeW+UX2nnwYv6dHGcEkOxQuzpBViON2AVH+c4iIoBA6Lb\nm42NWJs6jObh+jYojeGZTUjg91k21evkfwWlKdz0O/owGymPJD42IFKwTpLU\nm5VgQsqbCZiioYhrUGmVacUbdt6iPjTzbicNhvykJUDcsqN7lFClbypysCIm\nTA/OPAph07eYLzYCsDi5F66ZtmnYYYmF+Xu5a1Rb7po/oAZHpnauDC+v4UO+\nM2GnddkRV66ZqYegUMgt5kTmdS0fo3sX51NgWsyP2lqwu1005K2YNq9VSGT9\n68URnXEagU4r0qjdmD8q38kQwxmos95kR0QLbnO16bo5HyVimsiM0ZsTDdTR\newmSdGQOPhN7N6kHnmTYp1/dynkxmoNMg6YVh30fa5PX+EhsK/vUimvsYcV9\nqScY\r\n=S3ub\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDoM3+3wQFV+LFIbm9P/y5qsA4YvNehBG1LgQlfl7PaKAiBZcGwgQyUk5qiIY1CG/C332PYP6NjHdSxizr0vkOXi+g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.8a4c7e06.0_1627339456967_0.8998295424784968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.5b395fd1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","@material/radio":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0G8s0IyzF3l5M7crAHeeFT5dpcXhh7uENfROMT8Zj8X2sDalOuZFkj1GufyRH6zmAi8pus16vbcv2zUNWOAIFQ==","shasum":"df46268e88ad59c519a37dbe60521531b73a8f01","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.5b395fd1.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5eCRA9TVsSAnZWagAAiTMP/2wyFfR1vK6fIVWciRTt\nPY6k5a6Kt1AG+WdcK9sprWF0KtybcXU+VrVCT2r7gC5dGbIz7q+yEQV3B0T4\nwMSP17VU+dqml/eHEJfojz77UrZ9euh4N5pylE0KSk86vJ3eCb9fp7/kIyer\nUBg+B/7m74EaDSmkuHyVedVap8lYlniwg3zoLUwLelFrw1ecFSA7Dledt4I6\nozvaRp4q+M0fxzSoudnLIULKWE8q3/uepYc9u9Jm70FOwz+o4XSeSyV2fo59\n5L4arVamdiMWIhK3fz8CYbkwwwQAK0h8XkcRI8KtI9rjXOYGyzEYPDjhq+9Z\n/1Q1bXr7ZlM1owAeS7hP17tROBigtUok4AtJ5loeSM1fCzGzqnXmS3A7jUir\nDaYQhrH5RUpZAgIOioCl+JWgrheG1Hm0vVMdwCQ++iJFs0J+YrtxhupDCPW1\nf09MvKjMUHaY+RXOZWGvS3eC9rnVj5R58B4qebfYjhViK0k2Gngpcdx+KKcD\nuI6sU+CVqKHSdBu+/i9tfHiyIdkiVYp7dHHYRr+VHnvRppscdm9wPxxgl7et\naTly4H4O45m9ONezPpn5XjkAcJF6SRiQLTaAwDT2I2LgCJ19jpatQDLgIAHx\nxhl0VadtOVsXYyWMEKoEJfawv+2NRW0ztMRC7eTbFS5i2lSc4lO0Amt64x8C\nTheT\r\n=jE2t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrMdmERKJ6FWG5SACBL4EK6NRpO8aymgZqQ/BowxLW1AIhAMqf9fc084PWIzRk39ei155MdnS4ca0KtenghhBzliLf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.5b395fd1.0_1627426398259_0.6305510273060417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","@material/radio":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=12.0.0-canary.3f36ac75c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EZG9CcEGlXyrODz0TNUOPZWYlhe7EGgBtTPklfojr+Cfb5mhgp7+hRV3e0PE96PcXJjIvehOWNGXduDlBBE21Q==","shasum":"af7de254ebdf0b353b5af2268dc3a808d551c1b3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.e5efdcc0.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJkCRA9TVsSAnZWagAAVf0P/1aPwxYh5LGczTtHPvh2\nNvCJFEW1F212/t4s5QDcHCmTVsICwTRnV9t7AsH4hmGyQ8z12TrVN0G/uIhn\nkKwCSeVtPUxkRp5bf8kXbl+B8j6ePfgW+2OmNR4uxFIhzON8paihbKK/fvoP\nkyvNmnZre9wuCtWKDJ+749B63g+H0H2bEcXoyl/DMPjGeriHXcssBcdd1lrL\nquUkLLsyFqt2P6y2z6a9XyyJrnoKj6MRdfw8/d9DwuRyX8A7Bw23fT0dmPsL\nmWF51L0suldMG/CD354kEAVKV5ZDa0rtWSus3r99qr3gS7EIzCU1JZrtGb+U\nRyKO9v49/Ig2TkSwsU4+V+kpsHdc1fr8VvRubmhs3z9JojUFZKc255Ur0J+A\nyyQoJ3oZTHH0vuD7NL6bnxOlU9PdcmDPF230Wblq7/xaCDlzBGU3KFY29gOy\ntr6OZFkPeyEov4fFRp/HoeoddJ4CNblI83hYOX0evU6lH3lDpkOfZ/rmua6m\n6ZHEb+7giV4ousmqEFBb5npaksc3sfsABQbH7MZYSBjqitVbA6IP+NKglmwH\nTfsGqTTot9Xl/5HpqXZiiLaLblTZwjAl33f7GDeUpdK4kr99pz1ndC3rm+5p\naSf0lRKtEcYFYC5DFDDqIoHtaF+FMB/qqb/IX1cV1J2h24V1ndcqeQPVO5oC\nh066\r\n=7U+x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaIjb2L0kR2uqhs6aqnKJJnzV0CLTYuLodue9/RcUgYAiB/yqTeyS9UlzXfH4gDg+3Ij1zL7vOmyNvv2X+mVZjRXQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.e5efdcc0.0_1627492964690_0.9536871448834314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.ab310900.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-ripple":"0.23.0-canary.ab310900.0","@material/radio":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ufvzePkDtUoWYQ6C/6BRwyzxNk1OWoIQcynZFBTrkR94eH3U0jOtxdJkNcFGLGT9yh7Rl5753QMbqRN5GXJwvg==","shasum":"2a59c41224dbb6e4ce433dad0ac2bea7049b2e6c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.ab310900.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxOCRA9TVsSAnZWagAAssIQAKOYGrwrXXWytbj047k+\nsJ4NeQGnRwQeISasKy6pdkuSgrkH91fGhyf4eW96BOB1Mb7bGL6iUjCLnps9\n9PkFltAz7NykFNXT7Emptj3cwa2imLsKvfLTe4tZk1fDO8wq1CuFGFszKCXD\nPnPTLV6N5xhaTabR59DRcLiqQtaKCtBiQFmpa4CXQgKRCvlORPjbYp5hfT3t\n1zxAXoce3m54fdY/hNEEGan9e04babZmeyWuZ6NrW74kZcKCRdZ5SHCZefYd\nAd8BcOFhkOGAbpb+Zz61/8NH3woKi5zxyCdwLPFc8zshTWMHzcpyoHv9zJ4E\n1odxAuPcxxtsT+7CFw0iUju8Umypdb0gFmkXijrbe/z57B846LHJPVVfGCz6\nsNs2jPIJVg379rzxkAmmqrFS21PPXtzJyfqI3N8JbQ50Csw5AoEV9AtkeWnC\n8PDIYn1TpwRkxqoR5SeHkchoChIpcNKLpeJQkcx01UyGTS0ZekNdpaWTWeFa\nAhx/eyfAOJF0ewxE5nBjxMH+j9nZYdFTTgKZyGJYy6U/dsKcFFPx6KRgPir7\nP5nkWxPhANu8v/VymSOf1m4+P7d0zyvA1jsOd7CTwFRKqGgF6xNHowKt9uTf\n1Y9w255XbYoKKR+wPGOL7DejvvdP0yJUJivcxtmLR0qrX2EkwEczukGdH+B+\n+8cO\r\n=WfY+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcnwLua/UvZcJL3sj76q+eJf/QQfZBEi7odIa3C7NQaAiByM2z3qDBEC0k/fOtjhzNPbY0aTgNVW5Oi3Fqgr/yUhA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.ab310900.0_1627503694029_0.3776412517843606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","@material/radio":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9YsQI5rKnJxNrb7QAd+AwswG0+HrukU92604vqElr/RdEwnq0BCp5n29QUvEjYY0BnI14u2s2EL381sf4ASxQA==","shasum":"643902c24290cbf13d089fb3c4b28304714558a2","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.21dc9bc5.0.tgz","fileCount":18,"unpackedSize":99653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1rCRA9TVsSAnZWagAAYXUP/i0yDF3afC24OD9nOf37\nhm3X2t/4ioabX5jQ9gxRUYjCDDmwFKYNtOpl+swD0C/pRp3Y7ynAsldEm90I\nlka3tHcj96bT6hz68DhvDnwHEPtdTFTy+kBrToA1t0zUDqxrj4PZ+xrzB6RP\nB3ALHglXJe0ls1/06iuArOU1g0LI/WSSCXqBSFt+2wiy5szg2Iymtkrffaag\nEUY2VmOsZY0oi55Jt4LZ9G/on3rUz+dYk4SM5Dk3us10clsVEs5tFWF0PNSa\naFckjZhfc2xjxYjmLwZWftggo2SH4V/vbwaljb8wHvg7wNbQQpmy9X/ndSwn\nRe93CnNnPF1DqEAHoDxuQ4CykvPJige5sKBfALi6Irvn0qK5fFIh3NfXbrRv\nCWhPJGLUNkCNGb0cy/k2jXoUeZfyLqr/FCz8XzaUd2VAHEedKkWbkhaj2jnr\noJq+4RybmxrWpgGeFfR3TjHWhgw2K3xbyv9utFu7k/Nt7WkjI/+qiJfqGaVi\nP+fS6+6pBbmDSWiUpzrv8hYaBRcrv8vQUzCBa1y4y9Q3OT/Vnz+UnNojB8Ow\n/FAaa8SGYw73UF/nx/1anv/2ib3hgXkUneHtERiibSTAMRJaKwi741y6VDzd\nesZZhbNyVv9AvbBls+Gl1EN1+Qf0HDpAekxZs2ejrNPAaoL05b1Yzo4PwOhJ\nozUB\r\n=UBZQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmQq9SsCxCJieBBNARQi5GEXM5/6G631xMVKMynO5Z8AiB39FBY71Az6Jv4yWGCdHaLttwjJ6M97yseEnQ9reAxpA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.21dc9bc5.0_1627503979476_0.6046938358259668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","@material/radio":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X8YmupLafxIAzx+eBBr6DZM4ljO5A4cmWzWzMvXdLhEujpALUv06QLfvN1fvTNcvB+IyE02inRxB2nmNrLEGpA==","shasum":"c53647c4df997dc16c1e4d056178ab14b765667a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.68c7fe5c.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQkCRA9TVsSAnZWagAAzRQP/335/y36PNF4tziQ1MrJ\nRVEmixtak4RwvaaXrn8WRCqGZTwzhXwLGHYb4QsuKATFkmeojRTNyc7UBH9U\n1OgkPyBvyiknqDwso3ZfW1/38Zwyc2QY+e7OguXhoPXJZ6N0+xWQLPjxvvhf\nYWMmWqdFmPUFIDiZSEGR8MGnWncowX07YVvUIl7/itRFbDYmYqGLpXvXbdq4\nYqVQCYwhMuZjCNDIUjW9lyW/wW2nZ3fkWMX1QUg11mV+URkW5Wdn80Bvhpfl\n+fEHhYaYMfPumvFI9mAJwHzhcW5AF8+R9ynBnUBGZa/7XJoTYEA0NXiIe966\nvOsJstRUUtaF3Bq4t8FlsNX5eYeG5P63GX68zAFAhwLliFLOrHRU6q9GwUik\nj3lAmlhP1QKqlzXkOjP/mecc6xH6CYMyPqHPAuw9VHnqpuYssC1vo4Yzm6g+\nA9zq3RG3lJZ0wlsFLTCHaq05aAPSsWAjGxhLczfJ1pRlKWbgZOMxHs5odmcv\nwBwirTuXkJRthkHvkSvwFU/E9XHraKdw6XabpeAQXwNq+sv9HhwnfP0dQNTc\nfAxZXuACoEmZGqWZ5LCuzDXmaErPrv61s1ZXD8CSwpyFkupAAPeb16YTX/ut\nX9Jfd9ud7VDc9BLINOS5hgz++crAVSHapgwVu7EWambxorZeLnW/h1q4BI7v\n2x4K\r\n=e15U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPsq/JsUUfFOsDjcem6eUREAhSF4lRCspR/2mLoeMp3AiADtioayN5uHpgFZr+Vj4LUvtn2HCkgL8YF3XOLGRBTsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.68c7fe5c.0_1627583524694_0.872641039327446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.aebe39e8.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","@material/radio":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.ae85f7eba.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yggra13KVZ8zZusAWNF+5yQjZf33ClIgqZlYecxh7gKQ3mP75RIGFqi8fxCXOm9kxlXfPyrRByUawQ76xGAjfw==","shasum":"0f57cc661e029588dd54537400281deeab943b20","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.aebe39e8.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE91CRA9TVsSAnZWagAAQoMP/icap6g5c6pQCQalZyQS\n38V//+OXLuOUnhLov59erLzJAWIporp2xfo+ha56MuiDHnr6DJiBUdusJC7r\ntc/aYhy64SuVdzoP7gBNGjk/oQFbQxmBHnEo4/K+9yuwaSjOh+ERSYs3QeBG\naXqZY0T7jLczzn461pj2mRlvH0e2uLWHiLGa5OxlbRXCjb8ueKeGwMbSa3gw\nBKkWKmVQRSj2f3Aan+wm6GMjmnOc2olQrkFUl5zddz/sVFKNH6O4LDS8wYLH\ns0JEAIfR/kEKfaFvh4oZKfEJ94RvD/eQ18iprBQ4kMmS/1UUEi1zdSZsRqS2\nZRHFns0+b+HO8ZDbndvr9vvcaPlcUIcchfAOzunRMZdofhpHFuT07dJp3b/5\naRkUcheYebG/FPaPPN0VaGbGIC3eE0RkVht0xl+bdUvuh0V+1w9pdPclTUf8\nZsi6UvSlGCZCo4lY1J3xZ4OCcANdF6XBjeQD5g9Md0O3uY7lU7jwA+oWOU+D\nM54Ny5ASc+YbwQjoc4zKFZdbNmIvWwDva+387N2889hWOamAR4qPtN2hiNRd\nh0x2YsTziwlcceBBs7xWKQp8qSRZb/3/+k5W3UyeCVAVy2LKEr1/sVLk54TG\nn9IeXpsI28IA+oiRnP4kneaUeZTIijRdml93aCeToamsKiP2Ld8lYxQCyvdf\nN7Z+\r\n=Oefp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAZx/BhiSCdY+BCuDq9BzgID+RG4cgB7Q90JXe9nUWVAiABCOT/QpwqYaxKEu8lfxcbZ7mGZiQ8tQ8WxIUzrLnY0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.aebe39e8.0_1627672437578_0.7429725749624265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.ea889c69.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-ripple":"0.23.0-canary.ea889c69.0","@material/radio":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.cc5377458.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hl4/3gxVgOxkVONtkuOh/dN7HDyDl/+ncPsRtDWQfMCCz8pu6nMzkNH2oim+JPKIfT1q01Lv9O9M+ltou99t4Q==","shasum":"74fe7b484e217beeef8370c78617e872fc031c9e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.ea889c69.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9cCRA9TVsSAnZWagAA4s0QAIwVkIPs/5RmxrPyRREW\neMCVmf05TZO4llYMgt911vddMPsZCLBt2G9EBVCS/qSdRw3+cz5wg/MlxawN\nJaO/4RI8A/2d6mMfObuEPjukpllDQwN5jzPt6D8sqGGkVyTp/53besp2zz4j\nW1gHR/acgA+pIk+hB18FE/T2XZGeU/O36eBMriaVFRT5GQxPT4vkz2QjkAm9\n2ohHo6gxNR7Xd7cR7JZPTRgPEOQlHEb6wovr31RYsiE69mNnGdqKvmSwsbI6\nahtvLBO0UOktxYRoHcayeo4333Li6ERJ3OlUs/1U5LI/KNrtmnvX7a4KZrwN\n7XQtLmb5f3TMB3qLYJrBxEoIu+jPJ7FWyE2oj25Rn4GTbKfv1Zo8AdMwTDgq\nYtG8TkjKdUTOwla4J3Fs7I7fFQkEfoORB/a1nMwQXdqw5GhAu+3IXZ5+Xbw3\nQxoTtbCmhB2hnSGPiUmqHdoBoHSOG6d50IO6gtvHRSJoKcv/jrbND2PDIS1Y\n9Pdb+WwPT6m7vHPqjrHNnSeP0O/nSRSryEwQML/1Un11MHAprBVGXm6TQyMf\nE/SB75mf1V9S7OHnu+NNNZwM3zHdzxK0sBv8WznXzTHREPG2PO+alI4I08Hq\nZX/5Nsq3npAOliSum5qrpaiV6xl/b7DeeeAUv4yXj+zN66LX0KRAG7sqA7H1\nsy0s\r\n=lr8h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyQmjbIH/x1mfBjQ1wg3c3p0RbYYtrN5ZxkN1cAxGG3gIhAL3h3l0MSV9i2G+qv2VLxJamojxYTHS7PFcqD0au94x7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.ea889c69.0_1628016476792_0.5957280040170423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.21918905.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-ripple":"0.23.0-canary.21918905.0","@material/radio":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.cc5377458.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TbyuFtt8JULP0l0NwOOfIjS6Zr/MBKzYrisydukCXvoB9Bm8cFT/b5WL08SmY/tfqgRRhqm3Y7DxKpQtqom5GQ==","shasum":"cba39897aa9413dfa1d4fe3f42b8fa7d1f4a1994","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.21918905.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbG/CRA9TVsSAnZWagAA52EP/RQQCIcJw7lInxF5/XCK\nQ7UDarnPbC89QcnKHphmjxB11SGB2juSUXS6z+EDjRj9P82SjTUItYx94o7k\ng+bu11PEgYFfFJBvaT/5UGSP1yuF+T0UyJL+G0PJakon6zFKSA6aahTi8Txm\nceb++KsF4NrICmVfezgkurHHJZ/cRheCvWdsD7rkdVCAkkkCQUvV9wJTaj7g\ng5d91RW91itQw+MQabv4RTsznPgQXd9+D24Cgr4/qltFhcgW7NZxCMk6uyhY\nU6goj75+fIDqXNGWon0ydTmmQoSvBVBWdx5vWUPR/VEyXSPAc+FvIWP8KtzZ\nmehTSAk3fY/p4pCtNFg8d4CR6eYQQbMfi1n9HjBwdMIn7AHiYEdYYHxhTl+I\nA3R/X/V3wkviGMd9KCUhHd0IgKdGfs7mC3fOfoy42k7HV2lqNhrB5BdaI4ov\nsqPBLxxNNvUV0l4CHkt60roNPIxDaqmFb95xQqMIugc7YsiPgzxgRrANJXZ3\nz4Psv8n8c0Nx8L4UNSUOpW1vmF5ykztBXmUXYvR1n9LZ39UTH5n9/O0n41gv\n8AMYxLd5FSPbjt2xjqrkVKybV+yU5B/1wZeBx9oTVmcMuRTyEtO+3ojDg/fS\nnc/hndTJJ+AIShDUFFc/tAP35o29El2p9hoWXxxYZiS6vkCPbH9zRuhk3mbI\nDeSM\r\n=cDvV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrGWlN8e5QH4KziadrLfFf7uEl93XJRHPT4kilhoWqnAiAVg4RicK4g3X9gvtN4ejHprlfS75Q49VvyiGJQ05UEtw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.21918905.0_1628025279762_0.5642667320598507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.193c87be.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-ripple":"0.23.0-canary.193c87be.0","@material/radio":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.7c96e6b98.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c1CukpyFfs6ax4cyK1lfCBNWDVhawf+qgnsXtbVPePBEG7FkxgQ4+YluUYWVh385FDo08YbQXxMvcvihoqDP9Q==","shasum":"7878a3b0022d037a8bcbc179d217ce068cb0acc7","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.193c87be.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtd5CRA9TVsSAnZWagAALtsP/jOt37sTH1Ns6kx79xXF\nG17XzKlwpIuSI9bPaB8EDvb4jI8L3qjsoud7lBPGRbBo++fgZos6rVdQbpI/\nEJ+2S4st+396j4Pd75GRCaDF2553jkr/8FymtPHNfXluye8AoVnWUTmfv0KH\npIs3eluJ+ehNepJWQY6kE5M0+8Dz9GZTl8JzP7ZP67pY+U/BBI+zTGaCJiy9\ne05dtedo4/TYB0beNTj+0qYBLd0O4/aT0P+Kemx9rUNn/RepRaSIfNME4IdN\n9EZ6eYkUHa/iSnK73RfF6EbjhN9tT8uItsc2XWFZkVXMu20RKPrpjbwXUWNj\nTzyebsIZY8f2aWjQyOZT1iIWoNLzF7BHDPynasffUnxXlo0WpWPpU3sVDSQO\n7iLTzL3kvWPnCcp6pzsRTPggvs5cQ626B29u/5+GiJsx/TMULinstNnO9h7Q\nFTlTFzMHX92Be4ehfJG/a4lnragT14OYLTzNMTCMF8CUjVxFWIXplyurZDab\nZoDHFmDNfGJye6BcvOXAOVw+ZlHvovk9FaIiQccQjZ8KBo5Xn6xf3CJ931Yx\n1M79QpVr/CUru5Yb9V7eBts4lkAZR4n0/puxNnbXI/RRJP5oPJ+E7zlk4bLK\nVlR2ZKaTiPPvzm9UrYDZyqKUbQQuPVcEPpF/u0S029GDZOS+Uz0cthm93Q7s\nORWH\r\n=R3DU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRG/+wCSrb3zC2vbcY2mV9ImDOipvoP/12M0lWtHt9pQIhAPJW3DuL4ZoAx5cio3t2H3xEQFiq8V3jaqJbN8chk+hn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.193c87be.0_1628100473090_0.5514332689369248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","@material/radio":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.3dd611091.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qjAs3KUokTZ9vEK9DjZTYtXElEXScZMTId1mVUBRtSkQLpxOTB1hgg8K7V8ZVFv4xujYG1qXaHqWaI6qgZbD2Q==","shasum":"50946f4fed6068634f750bb452890f166c01e421","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.6fc52d8b.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCm5CRA9TVsSAnZWagAA9FcP/3mI0ls/7KVbz0sGusXV\ndlzCZPtMJLrJkrMzALqSOoAuO0aQNgB3A+XSVurnTUHPffgGE1e5Gqc/Wk+V\nA1v4T2dI4btH9XnwnbAKRJjgyl+cqfvX5+ftK7hNXKy7kxBpj1qFlKlJhRXp\nESnyD0LTx1JbLoBBu3VDrhdYWkvc6c5UI/JryfDoAa4Be2YZNczj7VfHupv/\nT+vFO0zauoWqj3mFjfbFI7EmqFc2qOED3zTouGvde9XQgSgKBOHa6uJKdgRC\nushrv83WEcd+c/s1iiKXX9BnuydhTnj5YO1KdXAc/Di4gKgoatGjnB2jWM1C\nzObk9FPWyL4PW5NE1Rx49JHz48YWHHH2Pf8lZ+AABrcfNsEGwwijUleY633V\nYrblc8D9XjbypzlQggnkhzoCtWpQfqOU3EZY0UDeI9OSJvd2h38vV9WDL4VA\n8mykjo9Z0P0h9wDfOhFjd1rZWllAsWkqDzfqv7ybDZ3C7dRC7rtCJj9qI1cA\n1Bw+0W8smOptcpLD5QzaChVPsn0zuIR+jpbRZ4/in+WsWdQS5N8r4Nfdfe9b\nlJA8XfbWpGipBCGXkTqOKG/NIP9HTM9Rk4PnVA5Xx1T0Wax+7/lh5P3y1Hn/\nzTD/ovHH++2OdZEhWx6FngJOy3aFDqWwMihKNdZ/gU+SwF6XqJSxaLpWR7aW\naMFC\r\n=Ewg+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7xLbkjJTg3tP7M4Pw9LJGH6YXllwr2L5fthmEJwqBpAiEA4G5pT8fPwUatEcIj3DebXNkQrThdtyZpg+vLEwXvnpc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.6fc52d8b.0_1628187065240_0.6251110245439881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.e2e9777d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","@material/radio":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JaXAgXTK0W33iz30qVRnb8i0PjdTbFAJQD1KBZuSEIxCL/ZgElSB+N91DBwTgSUOcUJu7tNNiq8NyJK5FfLaTg==","shasum":"b69c3ec596087dfad0a99c43c3117e120d142ee6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.e2e9777d.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqMCRA9TVsSAnZWagAAgFwP/2cZGo3TV0yUJuWfNEKr\n/vrXkielH83cnt0RKptOoZtDH6R5IKjD+xIGWQXZTn1PTXPel0mSzoKSYJL8\neabSWQzcLHJJpG7PPscBqOsqerIs6U/eNKC5ZQbc7hiBHRGZ9sg01nWn8Fbe\nrepW3CdDr9uTaAewuEv5CYnUc0TzArHmY7+GLpbvDImjUfm+bCQ2bCeCCQqs\n+Ho7cQMc97vGnjdQvJPCcFyJAkbO8ylxwZU1a/mwJu20jnoNqCujvVq30oDa\nhx21nRDreoRHWzYEJe/yiQCmetuSiM40uIzFQlpUweqpQT0OLkQZEXIDYk7q\nca8FWgnbH6WAM/7+oLZkE6us2rDVYmjZKrzeWcIDG1cIS1X/wj7L9Wc8Kefk\nWEB4iXDjf7FjFW1w2kaxMPjlQ5Nx97F5OWH80Aezv1YVVGKWhqABcbnGuLYR\nCMKfjExKwLmmAmLRMrxzFGcMgyenLoW/TkpXTD43Sg75t5qC5y9rPmxQVggk\nx45Mw3JCiQMBh5Ht5DYGcptv7ayU0yfNXMSXpiyjuqVOXujFvCO2Nb6GC110\nwEc+yv2+VfFyHaS9kSgsVMdRNOXDafb4O9t7cKxB220h6i8PpVDx6FQCQAXD\nwGBzd17TEHGmJI5z1qZXeFdMy3XnWGrt/X/Hk/tEg4WFGgzhVQxlRpWREF1f\n4xpM\r\n=RM+Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1akpwck/GAP4ps5YyVT0CE6Iu6lxhYzunjBs1GbRJJAiBhAjtjToRqxzTOShY2XMduUgpLx/4tIl2xIeBBqSMmfQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.e2e9777d.0_1628203659825_0.5242552137738414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.72ff1e68.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","@material/radio":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NBEd+HfRAYDlGeNFQhOP2/r2yar5pqnkAcytiLZxdk9TdAt5OjMPCUIJs3EbqlscAgE24MOQ1QG3MNhzRgOIBw==","shasum":"424558c3fc2ed36bce5adf35c5dc9501ba913d58","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.72ff1e68.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaA9CRA9TVsSAnZWagAA7ZQP/1HQyjg1viWWxL5EQciQ\n6ts0KXYDE26gYgZumwjMGDelh+mc3UPfiFTUvK78zUbcSCnKDr5YNB9fgzta\nEgiyjJOIOAtGgjqRwuYl+dvjlsX5YeuFvrTV13ePTDXcb3YOdXKAsHb/eenY\nlUeJuV5NC5uthq5Ld2IoeYBXw/oz9JZVI4geq8LmsOjg8q19EzuKBXhbihnE\nGlI71BfnqgFzFy30TThYTw3vEdkB7ucawpH/5n8PKKrqP8LPzuJpEeAHrDHM\nVhzZ+0Fk3C7WwEz4ds3aQ5A+l5vsDtcBlwOjSfI99SExuZVW05GneeY56L2q\n3yXqDAjz7bsxFCMJEEwfAgY4S816tUdIh9ji8ALfKul3bFQVFLOvSn/DCQHB\n69NtJTp+DB1ghwAnl7aeaVDeMcR0lfRuLKyvCncbkjIAAk39vqDskw0ZKPHP\naJqygafeR1Jv92hkcFCspEs4TjW17WC69CHD6/XDcKwSCyCRl//Snf2WgZPE\nfJ65ApLoskKWNPpxnV+orWNrOQuCwuUkbA08AHhdrv4dhmsymoTMoXIyfP7p\n7IKQbfnFfSS53IKleq1K+93EEN9nV573vmYWBOtovTxSdLWP9Tef6CjK/axh\nE/f9uVdmMHjxqYBnWSb6dnWxZKWpylTNwS1RLNUyj/B83gKlQ/l1fG99mcRt\nEX7b\r\n=3twF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvDnS9p0vSZXK5vG4FCknPL7rl0aW+Ie0ayw1X4A19HwIgdmA/Ka4E0a0Wd610oiRVb7RBQj229zG2jyGjIz+zTtk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.72ff1e68.0_1628282941715_0.2636734614509866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.c527e93b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-ripple":"0.23.0-canary.c527e93b.0","@material/radio":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v2rv6ToeRBpJSPqkcgsojaAKmr1mM1VKgR2S46NIxkV4kRy0ERbuJt42a0ofZXhaNQMcTM1tR31w8Oc5Y6tmag==","shasum":"8c00e77b80332c671e6f2776efb991d232ad8f9a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.c527e93b.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVUCRA9TVsSAnZWagAA2foP/iPLI6NoQO12hi/YsOZd\n0Oakcg3Wb8KqlY5Mua6IXXb2TaAR37bTlCWrsSTIoVo/E4tujb1vr2zdm2on\nOI66se/jJJwLWZb42SbqhlxVg5GUrIOZE5s+p15NZb7J4c6E9PYI9uNgILhu\nlMPcNVYKBdIs6Bk5Fxt8DHrNEEMBgdFzH1wqzgbb0rOpAqQ+jwh7fAMjDkNm\nmxnCAMDBepk534lp5iwJ5eTvgCqUUlIHTMABO6CI5QXjqjEcgygYIYfJEFWE\nMji0iXivJw7V6CkjOR3rHwgsxt0Q2gHIOpvyfshmKwbwS0pAetXavfqosd7D\n4/ny1SdjbuEdw2ekaU5e3KrHoZKUyJqbLOdhS/R2ONECIvR0hrJYPgzZ8c03\nwSg9iZgqXVlyrwPJ+pj+tO6FryZkJO4Jax+CVNVvzAqm/ZTXLNpUX7zp0/HF\n9WBGnL1j0WIZZrAi5TkRCJRBfxFz+wuivWZEzcjtEfFeMP7jRWUjKSvtU6Ac\nLxLghvFD1fSS4LfJLOCEN0M3kgPodnXb+SlYB1HuE+vsUXtBR5Ae9fxLwfmn\nOiQuwAG793I2357azkEnamA7f76ho8faJKm9Nxx6Lpi3VESDIH35AUfHrP5s\nhTNQVdPO1rzaHmlNPUccc4pyEkfTo6iTelidBIauCquj5Yf/FY+xxaDCNZWX\n3ht0\r\n=MnKi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCtSm7ZacYy5XgtNt7h1ah/QA3R8YiSxUbQO3hdPEr0DwIfG5RaWEeXNxWL/GGbYCTDzfJ82rGirT86eMO9pEurhw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.c527e93b.0_1628284244032_0.9197856910525755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.78b1eaac.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","@material/radio":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.b47dd37a6.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g9pByjD8PEDZmDnmBh4IyXf51RZIYCsd/bAJpsiVL0cYFuVCriMaVPPa38dqL3vHrdBiaw8m9WS2ejEEiCw5pg==","shasum":"a4cd17782c53dd499e63b77b182578c06e5713d0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.78b1eaac.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4VCRA9TVsSAnZWagAAdUcP/0Gl/evzx0o0WbSY+Zrj\noaOyae4rUA/VNqTVPoj1yPfU6FAm6ccKhHP5WZnoRustUElpZnxImA7bBYdR\n5kW6dPQm8iqRLZRxuptleX4JikZcvlMsAGzANAZtu9roMkoTrOlVj9uOkI8T\n5Lge8JmuSQUZx4qqhnXu6fmLHojI0o3XCnLhxT6kux15YVVRxh0a7IuKKj+T\ntJv9HzdXhmr2hrZ7s5jY9uluLDAKvIUnuVu50aOkLqNC1Kb0brs9nfJfcVK0\ngvtwyUGi8F0KF3HLNfRiU5f4CGg/SNJiDimAKSQgIK7I0IWOlc8piZCk4soI\nBQakRPpSbEsWm7CX9To8wR0W9iX0nLDrEDNwqpgO2qtvIM8Y0a8OR95JWLXG\nwZ5J2Jy1MMpcwUnE+GOeEe0nlEhJhbpCxd101hRculaAwKI34G89CdiDbOgH\njmDMeyo+M5FPNN18ghkOqhE2z8zSV2zcKF55UTiL0z5YGt6t23aFeWhMlPHw\n+cOLEwWNwaoYutnOudbwQPrVjAKLJDfLKIRBTK5l5J0T+faK3eVbHvGQ+rC9\njIgFoDiDaa6vXaJaZ+MibhjXyNyc5NlvEbJ9YppD9qokafI2DJShHHvDcYOR\nVxGQSIH6KcMgxI6lGB5fufHh7+Km+cxJjUif9dUSr0ceMqEdsrp/s/pjnQIo\nYvrj\r\n=4ll0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC790w3E1OrIRAiD0wXIX5lOHW6KhsVWoEbH0BvS1cuHQIgdkWPWZl5qFJ3FLmyUClsbwQi7RbqgncuBV8hPXjMpPA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.78b1eaac.0_1628532245520_0.04842428779989105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","@material/radio":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.7249a3060.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hjMD/kFuaBhy/s+RXtpUP753pyznhG32Eruf5TfZeO1VlytnML2lxevJgg740X2Yn0op1waWal5ZFOeBL5GGYA==","shasum":"54da50253b54858296f2a49bce81c93959ae6a9c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmtCRA9TVsSAnZWagAAFU4P/2PQvz139D8x7HomouNm\nJpAtzSp5gESrfHjxSMhdBBhrb1omai8LnmZlr7uPNy8f62QL8U2iAI+7/1lZ\nY4xLlWIFq832VqemUqjMbutNp8FY9ng7XNH+U/vIfm5jIVmBN2SqOLLOy/4e\nP46vFY/kYCyeJ4kd6CdSKthbVFsKPtU/ah1pLvCyWfiGrjvkfl1jgPkHYb/E\n3ZN/l3zRiz9acTdchqPlEkiDYM8WiP9qW85wIm7ZdXa/W7lQR/zvEMXsK0YC\nyOqMSZO+VDbZXKZ4EsDJaqFV4cG9KXBkXlpE7vnTPyLa0haE+kJTD9Xnr01P\n6Sn/hT1y4ysSSdjeRYCAqspNbdySp1WsHSHUW9XW2Cr+2kjTC3FKwYNp2Yqg\nbZANvMXeXr3Ih7KWoOXLwv77v8cuT0WhdAK7dfiSj2VzLYfdcJw/4CnxMNpb\nPNuRic0lHE4EFEnVJTJK+xkL1LsXfkAD18ndIyqZJaMW/SP3VilxN9X4Mmgz\nwdD38XFe42fiIx9oG6DrFYANK6T7EVB0ZWqLCCNFlDY/16eLBwTPrY1SduzI\nA9rVgbBiySyvSNkO1aOEvwmzEPq6nu1N9kjojHMXFYaijnaec21VcSHJO8Jd\nigmetn/ve7yOAFdzHN7vHNkw6HZUa3P9o+t6LJ5gmyWwPDfjoYPwI8qZzbnp\n45b7\r\n=WlIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNb4k2cDXPqx5W+93A6oChrHtKT+kmQWi9wlf4qvBbNwIhANppcnTKcuz2W8us3glOsZx4KE0f/pYtcxpbcBsVnTZp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.a8a4ddc9.0_1628621229093_0.05889899292647671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.99fc0632.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-ripple":"0.23.0-canary.99fc0632.0","@material/radio":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.f4241a42a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hDnjhZhUFPN4Rad91PvZ67E6yPeDEDUadsf0J0f4KPe7B7oVmPbPQm57e/wmD4kwfwbbF/m9FH5oKTBdge6/MQ==","shasum":"ab110fffb476758dccecb1e0307b2023b0e62945","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.99fc0632.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1+CRA9TVsSAnZWagAAfQ4P/0HnQZhOEd2cv5sd1X3Y\n3LNND9geNVWBGBnn/EAXeoYagu+bAmqhOFG4vEu+n69G3BtWhIAmDqAQBRhU\nYx2E9hY8yNlr/D+iROgs24WUXXVh7f3/PDG/ZD7h0SmN8DPrf8dML+DX0MjQ\nawCf9S8fFA7XB+uBMRGmTx+djwJT7bL26yeHW/BgxdPtD3/+1hECyPflcPQD\nJj9SxaCWZTyJ7Qsrg5YGmjY7jE2vmEKSmiouXuD0Apl8tz/V5Rc+J57IWi0H\nTll0wwYpOwZnwk1SGAajEtM2t9JKhkQGZgHJNGGxT5VCeEQRtQw5katSqdOA\n3t4P6LMjXjXWqXnLS9Cmvesi7WhfQWKDMkfcNJXrJ+c7odMTkZgJPqaoVEx2\nlrBYYmNItJqCG/Y6KH4kuCk8L2QVmOL+iw59oFpcIL/SAfOKrT+wUywdEkhM\nmG4en06k1AusuUKGRWryWHtPt2t9ba7aj3htjzuJK1d3QHzGwQVaaS/J/0lh\n9glzBritMhYDMRzfOkAC0++75d1C/bTmzKmyqfVT/WBwRZSwyVrB+NUd/Qra\nP46Cha/rIAkdBAgujMTRHQNCOAKqvfHtlXYnuPhOEVkTnTrntWa/Fp1AXnK5\nIokbwLkmT9K1trt0kIe2Xg+R7BkuE01ee1HDQnCU+INXVXu63BJm4A8TU2Me\noad+\r\n=R0Ft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyVuftkIH1IQ4Sw7qnwuUKECSsZ7Jzo3FQV4ZOeeaofAIhAMo9WHk3n9WVuX5Gy0XrwO6X6kg1FeuiZ/GV8LTo+FND"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.99fc0632.0_1628720510680_0.18878216459050123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.3f47ae57.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","@material/radio":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.0ad12ed3c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fXsYN+QB3k572fcNtiMcuP8OUC0yat9ojZ6MomVfh7HaoNKxdqnQNx3Qw1VXvsRBs0kQZbKsM3pPQ7GRXFnSRQ==","shasum":"f7048314332be90b43f58820ef42b5c340ab2081","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.3f47ae57.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGuCRA9TVsSAnZWagAABI0P/0HtiXkF3KMVd0TYE++j\n5J1LjEdKXg4/mwXSvMy6RljVrU9VJLrXXkO6IvKZcNsKbt13peylHRPK02G+\nNWCn5FhqGX1dQZUO3phMH51b1ID7G4j7vQG4VeaL7cEvVw9Jxmt7YqZyTkrU\nbTLrqrkANqP+ohbIfs3pq2oDYqE5MCBhkJZtdSaj9RwfsiJ0E9P108JmMqvK\nMxLZQMyxJhsAhInnfOzIXLJBbKsPP6gaEo88U92JkY3+vzLYpOy4JTTV251N\nIPBQSVUcrrhZJ06hBgm7klPolpcwboTWDnKiyj2KP3yg0BYz79DF2y+5Pgkc\nlrO78rsemDLM5cvH3mnXhPbFJacO4iE1vIhcc+kBqBtx8ZoivHbRFBOwMEh5\nmQzJgfuvCmd2kJvKUEhuUvax61D4NwtVRdGpQSAT42FtrNhDIbX8OFQqy04U\nY5hrtuo6M3SN4aQ9JuG/lLWRIGdrz0tDaztYQLo6eKvbAUl4E9iGafzqj3xL\nVIKXvOruU/8xyJyzZo9/4vk/mrQKR//VR28/os4bkpi24epTaxswKjNlrx7M\nE3OC4QJ+BzR6KftpBeIiA/zs/sp7S4A4Dseyuy7KMYpVON3/OCxE5EvEaICQ\npLUEVOgkrMNoaSeDT37azqwyCIRtuj9zMsUdDBNsDpk9c//dXG9oisVQpmVF\nzIj+\r\n=uIm5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJz3cfBKYDO0hWRhi06uN1UDTl4GSAObXuOL4u7gczrAiAanTl1UAm7oWK5TWdR7b1aRonU+4Nl8loRstm76JqzDw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.3f47ae57.0_1628791214672_0.5058630913462876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","@material/radio":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.077dcfcfe.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rAi+L9hfDjDkrgRgonERx79YtLKCoVb+aoeRs8uKn2irrZI5jSVmsVtOr1jhedbeMgXr0JuCXVEAKpSImpU4vw==","shasum":"84b458c86137747a415a304fecdb41560bc616e0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.6b9bfc32.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdYCRA9TVsSAnZWagAA3d0QAIHzx5tUuQMgeMZgWFB8\nb3VUme4Q8fz8mHypbNfefYFEnijHgzaFeyTyAQMhlVqfyklTWvK3G5cofIsW\nc6E0UNX7yQN9HUv+Ik2jMQJM+4hp/LemaPHRD3Z7zRJN7RK4w0xgbhbPKDO5\nCu3hkvcqU+anMOs9/D9IOrgICTEUBYN33tJx/0vaRSbjF/lmHF+S07xiPMb5\nM9fqhUEPdkolOYy5LRSsjRF1qjlQ6ywE0RgYiTxaCx0FMrhy5YXsAI639eFU\nWu3pkkRcsbrD6Q93kB5pxvyQw6tRUfQgb6PhfYvxwYj8gNFUmZqSss3o1p3K\nGHcB1JapYRXcp18fPaxnxneR7aQ5vToXLgZSfsHZwQtYqIMcZY3JH4DJHGmw\nuaIz4TtIRVZP72rPSeMIn5OdPNYrSkyz5fMLngkOLhz7jTXW1eiP5ZyThHsz\nyGdGwcE8EUxxc6LbYmFx8hdcveGlCpSoiP+VplmcO6sgjs8V0Frgx8rrkQLO\nuPShw5Fhq5SMonLt6vMPnmolxan5+D5qER7SLhAgjVcy9Q1luxUZrBR+NIgK\nEscOModRXltBIkmVUwF1AEsKRkG73mCoJnkqA4GmCKOdWEI+kPfihw7SH0xu\nKgYB9XPNxsE9VTpZwjWHAIH4LPTooB5w8E48JTmik9JhEP4AbPxCYP1YU/ga\nrWuB\r\n=FvK4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAu7k5By51aBo3/a9CaaQOZMupE0eM+UsRQ74YKG9jCRAiEAgcY5XJ57U1MSHAogsNqxVTtQkv3d/mXudy6emulnyQU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.6b9bfc32.0_1628792664423_0.5236799919421309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.c89ecc63.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","@material/radio":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.2fb068fb0.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LhPhZ7/4vF2VVlleHYjpH5NlE4DBVxpdNY5vhAQ0sPELCwONg4TNNdMVYaLBDH2uH+XjkavWzDxi8Govkxyt1A==","shasum":"58324bfae4f0eb060f66b5ec6834a3b508a50944","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.c89ecc63.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2XCRA9TVsSAnZWagAANNQQAKEDHRDUr8Rej4x8lyxk\nUC6bgQLQr2y3l6RN0qOYMWbM1rPmxVPiVY2fa485GweOnMdBYyDPz6oSu6/p\n2lS+CFI5J/MlqOjxkjziplrQpTPeqs6KYZqkcc2YOMGC4TpPjAy8KUORWMGi\n5BJM1qkr46APVluhPWuNE9pIwXxh3fVvS/AguVN+/Y1GwvHA2mBv5YfeFISf\nNj7DCJV7YjuMojEkzgpUMNS1R5Pg934K9UczZhC+aXcprfaVCLy8vBxWi8R1\nUc0aEAkuL3FHOrd65lWrqPkySMO2tb7Yx/4dphm4n3HBWtOKGwOVGGxeX54B\ndvF5n4wRs7Nj8QYGnUQC8rpfmfuJcTvUCo6zg64ucmR0lE9g1HSpi99JnxWi\n6MbdaxvUK29zBoBmD1PoC6LjFrpGYuxNMaNjAIPKBWrxEdRkb76mfSWRtWCy\nlhGt1ub6r2p/TO+HV9taewMYm/dAInJzIczotcmAmOe91ReePL0V+k9pvJkg\nPtWoHwm7n+6lIzgpadze+LFJyzwDwN+mPHje7ocjkL34XDk85Ta52W57V43G\nDoHDrPZ+m5zDWF/vTNhkWuW1y5EEN3tg1Dg730oLicUdbs2N2HePksLqxxVI\nENFrCxlSGHPC4GzZbMSFB6DRoOV9xXwI1wQTvsz9yvoeeYHr8igguC3ux7Vl\ngxum\r\n=R9CT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2X2o+dIt/h7RdhihQgDEG28XO7aiQo2qoVwSNiSZjhAiBfAkgTDcek24GV0CYn/doa3g/8/VMvea4FgfZctjwDvA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.c89ecc63.0_1629134231104_0.7116253385045894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.59de86bd.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-ripple":"0.23.0-canary.59de86bd.0","@material/radio":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.457d89aad.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MKvmFlZoG2SO99Md7+JuHL0WLvW78wEfrR/rPi7y6h3SsiUqUYu9KpX6ZZcgRoJA+KHwjZ4edVYXGpVTD24Gzw==","shasum":"d58d31ade99e54ba8447320eae8bd266959fceea","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.59de86bd.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSdCRA9TVsSAnZWagAA1qEP/1KyDHe4CUwvYzYnEmlM\nAVOVts+YG31mR2KwH4aG1X7u0vn5luFCpeE9h4Ht+OOQgBMOo+GnjdxVWPyU\n4l0YKgtFm/FEoaYDuI5almnzGDIeG4Lp4VI/1AWGYCorNiTEdqQ7dVIkcwHb\nAzCljduN55ZV1etf9KnsoW1diie6Z/cvTOOTkgzSOPAuoebTrKHZF1aM7Qhx\n3onLv9QS7dfG8m1O6EkuZYNKVLZ2l+m/cmi4OKZOQfyCJ87sWJ6GxY3fwqmv\nomooeRDbArNYxCVDg6t/j/M4CrZhtonNSDMq1vQ70owtUqDbrQzGirbh7Qu4\n5xLHdZHsh1Vdr3kQ0VJwGFIv6+SRUxYBMbYstiM25Qxb2kkx59U9b92xZJIh\n4X+B4GLDYeeFus7r5Yd8xywgjdR/WJkGk1PaL/ce/VwBROHhyBOJbbiFbqNn\nzPzPOh2/Ysk4a04mDXZN7Oei1oNDsXVU5TkmOV2LVkfmvrXmziafdIhJyjUh\n73/tDhYkICe8F29KWu4sVP26PC/M1qs8L6OkqbszmOjaGD2Pj7soC8E+XjNh\nfc8geYht05yHPn3DRzeycBET6tAfmHz6nc8p9OIuxaP9diZgodn7x9Vln/Mc\nUje6TmfGTHpy4id0pqbJYFZDmnpcBJnW0R4zyCuCsZvGp4lPksZzbLl+egbc\n4LiB\r\n=7dfm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvHy01/MQlQRtmkTN234YdW/wbmzV1KnVKucdEv99uuAiBaqJTNE66vi+8FrMQyEa4m5Y8juaGwGVdp6QcWtnINOw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.59de86bd.0_1629250716649_0.08995948736189985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.dcda879b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-ripple":"0.23.0-canary.dcda879b.0","@material/radio":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.43d2eed2a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B5TQR/YCR4yrd0DKfJWrQgX78vWhWFXZRuWhwheIKz99fY6PfUznyKEscHjmA4JF1QpftvF4gZ/3+ODHWXcicA==","shasum":"e54b185607f6ee20aa4e28ff9ff8fb9f8eb58f86","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.dcda879b.0.tgz","fileCount":18,"unpackedSize":99627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhjCRA9TVsSAnZWagAA7a4QAJcLdtUfAEEvuN5wNLOJ\nraJYJLGAdYyIkhnEjB/OdskfOKxx9oNHbpOOEbMMAA59uGLrYwok/v5PVdiv\nVUSYLh8FTlfDQcFygeGhLZsCOSc3/mdGDMYeQN0y4isceUaCb0rDQM+fjJB4\nXbJDtiCQfFGZKdeqAPxtSWgl0Ga8W3wt59eL/sveicFR+GGptAHETDd3SHTo\nmbShya5xjqEVUTLnp1vSFbLrFGWDr5XoBIL8jxO1uUsgfPX0pA7mPfXUhQhT\nyeGtqAMoF8ysqoZj/YDRC/8E0sz1MLAH/f7MJWN5DGtUuv151LR4lT+WrU41\nfa9YxctFKUO+mkJtJnrZKpzPRzXWHXayojXeW+XaIZytPShKQ/EYqQXPiNOj\ndrHIvZQg3sat8XLXmUsPwwyoXIuWWfuXM5lGWcMnq+fN7k8ZfiH7RVi9uPzl\n21s97OA8GsuQizYun6tBRFIB/hEBlRbF/MK9QFumDbvDy1zx3x9YsciNhwvc\n5viUsZkwnyrjyrYPTT4oDK3XeszmhK/hhjq87jUZqswqeKys9EsE+YYre+WE\nmV9blriBTXJa0Pyd+X7VOimCd8s7pAotuLtT6vW71OLEJLEpJBTT9dLxj3OS\nU0XyM+OPTdSsb9Sktv40OvEv0BNsWNlUq9OVvoo2vvJfTCmChzCzr8GMhvuz\ncxeZ\r\n=o6yh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5rYd9l8gAhGsPHD5EzeAd9w5ydZ/Mfunk0buQVHJ2NAiBOjSoOwiICouMPw7JTrjoZjQuqrF1uCe1WvFvn+6+MSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.dcda879b.0_1629325411464_0.25118604617305573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.dbb8b366.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","@material/radio":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.43d2eed2a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PRqYTQDd2AFEJXkh2Zt9LvPEbQwwxEtx6L+aKCCazP03TMV8EupVWnl3kV+bZm1pqg1+v35C+bz1PahexJI+3Q==","shasum":"704b5093259c41b398e3e4a22bf03ddaad23e0d5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.dbb8b366.0.tgz","fileCount":18,"unpackedSize":99605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKRCRA9TVsSAnZWagAAL8cP+wbHfc46JjefZ/lAvna0\nnLJZ2Sil82bn5QqZ0mZ0QvXGRj+unJSJD/npClglk1aL9FH2f1pDDOJ2E/nF\nQuEh2RXCu6927ByIa4ArE3ZARM69KvvufarOFIlvNW5iTthX2sKc/rnNNXCa\nLklf5t1LutF+1HUmaTQzL0ZL/7d0YCUJTLB73rMJel4uCvgSKD4/kmDsxdBf\njFjivar1Cd36SGF+XNpLoBTfnkvB7u6RuEy2nI7mL7Y95OAwIrtAIpqfvpRE\nQALBhU2LEs5quFQZXVsnTrPQX/L4JrPLhhn5fhgUEJoYKaF+41UbCPlEetMY\nuxHiHdomkjeXtKEwwjH4tA2F8oINcJm66Ly/vlrHdXB8EWOjW1buZA4sQx8M\n5K+J2HMQhl+Rzo+MgWLyV1gqWxrF+P12zKK4xZsjeTCBQl4Oa0FfSupsV6K7\nqY2OsNVe/3Sn07mmbtOnRFVWNQm4LFOgZk9CKMnddg/HyYNQZRbzHDsQ0FxJ\n99bHOdUMpVsU15taPHAm5hPmlfR46oRgCRafVE0ZeuSqKeg3tWRtvq9aGWHE\nuuXDbAEQCBDhfz+LV7cmHxVUozEVofbTY72Ul+2UmMAvFTsQhxMsY5xV8PqM\nFadAjubHtV57uSsQsz+/rhpI36DJEI+52lVQiDo4tYcnONmhQA+g4B7qdK/s\n7vdv\r\n=qQfW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnFeFc5BhB6/wUs0YAn2R93K4A22gLt4HEqsrqY3fDLwIgbdFrL+UoB1M5Tjjc25zCwcxObKB1it1pHLI9+2jfXYo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.dbb8b366.0_1629414033691_0.855456015987673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.c6e3060c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","@material/radio":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.43d2eed2a.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2c/qehXxzXyJKdO57eemjfwDqd9STRStakynQlHZUa9FmYNyb6eC1CdRcaoJ8+ptCFCHh9/sIq3SfbxGEflPoA==","shasum":"511aa5700c11ee172d4973421086e0eed3a218cb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.c6e3060c.0.tgz","fileCount":18,"unpackedSize":99605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMCCRA9TVsSAnZWagAAUJAP/3iS9llJmK5BjFOzcfy/\nqklAvmuClmgWPSBC9rMfKMoyzP6EHcNP7730LhzpIrS0390fDPsbbpTHpryQ\nTnyOmEcQWq3KjU7/jhg4uG/xtpSBSDKZnRm0m1SItxT8nPqjqIUxCa6eWW/g\nNH86U0c0594wQyVZytd2YB3Lk5Q8afuW7fFlGIypTzqZgS0HLITPMjE2mDeM\nSlB1rlD2O80a0dR+kPNTVl1cuXSzXi39AHaeNjfa3xHhACjvOzxiXFaQ1Gcy\nROjhty8SvOVBeDyW3jF/yp25Ff7mvXFwFdPEncso6lxSkEau+WOm0So9Wh9O\nj41PfmbKppM0EsG7TAwqmCMndP6Gg0rxsevusfv/hf0enCZksOSDCGWRU5aO\ntr72OaBt1Utlf131MuEPp6DC6JBgrirZLl784HkV3gO046F6TRfSHhJkBcOh\n2D5j3sBhOlNkj3f5whSsKJcjfFRUAbjjGSQVfzF1Xu/vLcJwRPoQRVa5wjDS\nJ0NAcBStPU79erKxsjc1dQhdBuXurv6Xm1fA9If9HLwNUddUqVOU13EcAV/v\n4iFmL1/CEg4ciEyhTHDx19pvwYQTgNO5B18QCdclodc/oedeLxYOot86kC0i\ng+XSs8joYAVzAHEpVCgh9oqzK1BLnoifQWXyCyHp+5gFB83ajBxRV++BWzpa\nz7f3\r\n=/m6X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmipbNv5YvrWi7PTUeew6zC8qxVbTGt94Nqrftl41raAiEA56VjgyOyZXEs/FNZRN/vlPdC6kmJ3zd4BGhug5aejg8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.c6e3060c.0_1629414146176_0.0323385529296456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.03120b7d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-ripple":"0.23.0-canary.03120b7d.0","@material/radio":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2xUJ2VznPX7NlhIUrqa7+zAcbK9fa3GpD6kim4cwwUFyFT8+P4m3KRNT8vfEMQPzdwtGB43gf6rs2ENPLo79pA==","shasum":"6722cb787e12ad2f2b1b2a03349ffe32f46c09c3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.03120b7d.0.tgz","fileCount":18,"unpackedSize":99605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvb0CRA9TVsSAnZWagAAx10P/1/5yMjXKAJH2mhIR17u\nhoyXFz0HJxK0czlW9SumC/gE6o/dmQLWW98yGNHGW86D5HO4HoQhNS1KC8xt\nE600ASEfY0o37jLTLcJbjK76fuf560irGvFQiQkbHiXsqtNBowiRYit68mcX\nV3bfAG5AeazqXh0E6qbagxesmYVQ2hxd6BJtPYLBNiKFkwDiaIXjzHCXhneU\nSQlCaLtZfhKsD9QXBOSZSSlHPBljjquwU8+pOBKPB0tGb6kU9LpteumrXKIT\nG06cJk1r96aUkNaP0G0D5qEJbO2OA6K9EjJBiPr4Uvfb2zDMSODBYe4xmTT0\nOiWTST91hPfeHEFnHCo1i22RDooRT8+CZ444UKSV0S87iSffv1+IH8YGJVfh\nun8frnRqqjg97pIOjjz6QFbwS4zaDPaAJgBo/ONIQmM+KTBAkd1sCBCiSo3o\n61O2tbjadzAO/e1s0Y+4eRF+/rB/ifsyc3FbZOO0a5oCwh+6ggzTnylxlACL\nTDAAdhARl4cI59sqxlOo/sKvG/a3aSr47TNfshjB3rhP0VLli0EW8GSAlAp+\nkNpjvqDXS99WGBUmaH8EUCZGFI/QHMP56tZ8877t5z2QvQle8tMt9HCJw8lD\nxWvKPQtygHuIHnl8oDNM9/kXcuH8H5VA88AM2BhyyzkqjO0eHwu4RLGg35M+\nGbcC\r\n=uMnl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFesdmmxM3Gl54OeaMwDBRH48CbBUBqVeAaLDoBf9acEAiEAzXtg6rzZ34Z87NUBx8Z0qfKZ7ypAug/COIXgnCmJ/CA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.03120b7d.0_1629419252244_0.15749030267994324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.d75a5f74.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","@material/radio":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ImJXHKD4tqmiugIzo4RMRjUVHrA3hftBZnwIzIWDlA2gO/Cao7QHij0zrqOiJBy7lUeEoQY2TOvmIYnyWNoNXw==","shasum":"8bb622a622f8468de9c317f6d2fc102378fe106e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.d75a5f74.0.tgz","fileCount":18,"unpackedSize":99605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2A3CRA9TVsSAnZWagAATZ4P/iuqrTB/7v1KHpSHFcpZ\n3QETie/ymf9VzMjZXZEgzQdNaiO3lNmxH62xg23yjDhG7YS7TP2BVaBcvi2o\nQu63aniBcoZvejyEc5AwAUIsyGIFonYmQJ5rTbmq/pKaIlNyAR7gdtANhb+g\naZO/goHlMMx7cUPJ5GaL2sTJjeKpm2Oi15GGt61lLOT70OEe7DlAIVFeHtvc\nFI7p0GGpJkwmbKaQdwXr5Czthd0uFZy2GVq44WqzWPilhYCifzivWyUPs+H3\n0cUv+oWmtEw6SUeh+50OVljTAub5YM6XZaC+MfretqMRtjcfxKwBPaqou+li\nghG8C53Ip1sQshNFrPrOO93H0BA8fNz5Etmc2wxfdZq7xS8p3XUEKWKlfvRB\nkKBIXHAG8Kat5A4BUbfbnKfFWq6iYKhRgoY8MRIXdA+Egscy7aif8PfjeK1I\nnAHthzcbBoT9aayJ8Nlo0MXsjPYgOphN63Tq9lGYkWMu2DYSKCbNoyoQ1oqj\nKfawlovVPGQ9Zy3FdKvPr5ecnJH71fGwxZcHuhRJQu5b+00wJArZFnziGFrm\n3GMnNbFP9u5jcdVvb0yhebQlSdA7lF9n3sEMgTXqnA4TGGwbQnRdvhAAQ6ZZ\ne3yAQtZEZHWtjU667pkUn4ZgpYECWT3dUd5lUK75xPqbe1FZuWBw4KlBZzZM\nR9kM\r\n=iv8c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOJSFsXnuwDhhj8tkFv9o7lsLfyCPwJOcNXXK3sGpEbAiAnYxR2Db/NhRuoMaOYshd7QC1KHB0p+zsaGlTKQ19Z+g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.d75a5f74.0_1629446198909_0.19059442642039892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","@material/radio":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HEPaLf86xqb7wJnorAB6FYzgJY77QNfw9KfwQ8qbQctN48NMUNd5YUq+zXo5lsi5/TzGpcI7ektcHtxro5ow6A==","shasum":"c620cfb19080386f7cb472ae1e50adec6f10a5b9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.3d79ffe7.0.tgz","fileCount":18,"unpackedSize":99605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SmCRA9TVsSAnZWagAAkQ0P/16IJKbSZhBJWvnk0jQi\n++8/ReC//m5Ddv9mOn/MFqLba0Agk1DdTCehsvgBm7FIh3ZLfuNsPsofLFgt\n/Wm2KG55WpsUfuyMAXzAehjTLegNF2VitpkQa10bwUuBRGw/+kn+abuT/wOA\nK9lZ21DdB7a0Etsk5cewuWqNoOmVjBycTa0fhOwT29ZJg94XA41VEvZTdFoG\nueuimqn95wS6MrRYpOCdekgjvmE4dH+bCm10mn0toQCwpH71pT9mh2wOggkO\nJjfGaI64HR47V41ohmKyWhbxxNCk/9VX2/geSFmlSyWh5ViY+4x5eqhC1ObC\nkDCnpCovne3/3QGPxCz6Z/ZTeTMCqDWZPMsLNuCpKo5NQNiuQzj+DpnViWVg\nl3Tu4JSP8ZBxJED6ksrc+4jhBi4nrXKt9vio7hN9d3sMH2qDQNBn2mrA/NA8\nxC6/HthhXRYDIB3Y9tG5pLCG1/ZwPxIi0EjwP19N/wHwH3Cc/sUn7bEWqSZu\nzFXEN9jqmbF0cMZko1li/sXakoMdsjXRkeDNLjE8+Hm2ei596zqzxSX/CxYT\nyVyca7qkYZ7N0ZICLHfdyh0ot6wfTKifBMAFrIRkekko3khS6Mm/x/oLJF6h\n4xYjt3rL5mYZNaIusyIyTIFw1TSJldb/XoVp5k/79z/pvcVeCyZA56ncBnru\ntRep\r\n=u1OA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp/cMkt9YtpFq2luIHKUsajgUcHBsXydWx0FgPRMnnNAIhAMMlt+viutJIfQ6q2Nlvvad6XHbKOxskUmq3ZJw69Nbv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.3d79ffe7.0_1629480102762_0.5949834928007527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.02213ebe.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-ripple":"0.23.0-canary.02213ebe.0","@material/radio":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.0a9069300.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uiA3vhVfnsVB5agyNPGvzQXSp74u0WpwOXnGniTqjPcjyOSbzb/dGAHK3fAfVVB+2KCQmwgvdrdjD++Q7+j+5g==","shasum":"ea1fd81a5aa6992dc46dece83404f3e6f0efa8e0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.02213ebe.0.tgz","fileCount":18,"unpackedSize":99605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XDCRA9TVsSAnZWagAAB5cP/3kTMdoKmLTTHjI1RA41\nmAA7Lcjhma1x0WFTOOnoK5X1rjmHVh5EmdeGr7OtcD5PWfUQN/mLLEmGvlUz\n2kawXb18IMnvWRRqZL4s6B2Xdw1iEZ/QctOvFPdOpVLLGyuNK7yCBUV4bZCz\nWTNTrdpiB34e9C3l0IKEgkZFsoJOdmC9N8rYrLONT7jAr8NKr5Ba1bnt2944\nlj+/xHiewWdRqWL8lc2Za4FjYZyOJ17Vg/kTooiUy1mwG5uEPdafHv2kJUJd\n/12CYWrDV+4KCQ1uW4IAwzZ/am++KoiESXugfgSZtCL9iQrTthTIpjymMqR7\nQtgzcMXUyq2vsQhHo4CSp7Ku0nU1YCxHXXh2tgtPpefw0+Qa+UgHZRYw4nnl\nKTixSduPAe2Kjic5/HcJDHqGSJi5IykL5Qj7M0xrwIvr5xwpyqlmAeH+lvDn\n6A53/szGGVcHUA2uCryPZxdhUwzXqGvQj8TTl3YqfdFiCi/Fpgb/OI4rPKCs\n0HE8mK7wDP59x1SuCdX1nuOzLROf9hkquI3lRin6sohoOqIXjYJQpuavQqxo\nI8lzW5loWJqJeCkOynya4sHUlXgxY5aw3Yew5PE5RUDkhuvy0zBjen0z1nDw\ny4vDJwFK5rXrIf7fO7shQ2q6uySoAAD220FoqUg5uMxw+LtsZxwFz2nA0vc2\nFTZz\r\n=GImu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHC4J5xRUmHNqEtUnZKCFazOMr0hUGQkszgGg6zsz0uJAiEAmKjzvo7tmoAcXWRzR/XN84e7rovHEU/BAY2Gi2x1b1c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.02213ebe.0_1629480387219_0.023875044575210502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.90a999b9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-ripple":"0.23.0-canary.90a999b9.0","@material/radio":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.7da413ed8.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xBbzgLfJYHdGiDEGP76EqDDzvxCq75yvqQ6mATSFl96i1aRIqvUvghYouuHmmYvUHUFNhJAC7eVV9v6e+5kyWg==","shasum":"f165268d4c8ed0c0620710c3d0988e4a452050b1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.90a999b9.0.tgz","fileCount":18,"unpackedSize":99605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/erCRA9TVsSAnZWagAAwdgQAJuGz2TG4uHQQ4Qua7Sf\nccC/P/bc0nSvueKgnYX/2fUG4hTxIP1YtWml5vh5Ueq6Y49W8iBavj2cMmwv\nF7ekflRmRzxlVfKpK1v75Ub3ryxzibQYHjC1zrO1lpCfdlkaZpC1PRuMtmLC\ny2zVgChgLDwlZzJ4vyzf7woD30Sp1B1IEhgoqdWo9OQxV51I9eFU95/LaQpp\nzOhvy2tjrgDPtY+k9HwTXI2GI7xBvvi/aLbk7LGQckVebEnnGJ2f6e9UrtYq\nqnLzOuYU6xPj96t3HIkunPkMu4Gyg++5REMxGqs7F4+mHIjuvxXGswHkvGhj\nI+jhX6v1gzxUvidFxvZghfc3DZOJKKJvLtznlCOSIcK8/M5FRtZYCaJ3gqQJ\n4S2d5T7V+LBqQa1O4ACIVg3Ct6h14FfHJXOJ9XCNdtvwpR7/1cfPKUYzkp0K\nJ9v8rmRSx/pgxBcriqe+1AvvggoqhkJ9B06N93QP5cEWAs4Wz6IkT4WqsPga\nqZUAtwgMolh5aMizwh0SkETLOiDaE82zgI8YoriY3eEnBzgERKdNqXepyd62\nDHxvBMWbccyJaC4AFEHPEhdXZ/ZfJXNZVSvGnrVJEAdkpqCnEBAMm8myYgNz\nsdDb3UWWfGn81RImn7hYGUOa0zX2kJ60ct5BlzBl8eChUUa9JbGMcldGz9Ur\nig/c\r\n=oO+J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwxU3u8MGNAxZwBN2+jUy2sKHGrXhASUoinGzIrcU+QgIgAhzEjmmU9886ztSTAvkPDEteYDin+RLLgAj5dH0gaYQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.90a999b9.0_1629484971651_0.3602987597960794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.6db58716.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-ripple":"0.23.0-canary.6db58716.0","@material/radio":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.7da413ed8.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w5yHw/afjtZrmONSIOVL4FF76TfaEwL/7LcPz0E0yGHK0v+V+utaAldkulCX/xcJ1QtF6a75+4TtbalfBMICPA==","shasum":"581e40aba7d0ec4331871ed19f099232c0d2a518","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.6db58716.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WACRA9TVsSAnZWagAAX4MQAJDb6kB5vtSqHqP3m01D\nRttMjCSseiL8dvZcUughNAYA4vYt+S6DBXOxaH5jAWGXQ+QRFGTgjWnRK1h6\nFHsuP40ch7sZ7hOpE7AQCbC8FtXX5HLPEtjuCnb9xhwNA2G4KeJvwQPNgazo\nW9aXNEjLPbXc3N5ocNyeD6NSyNhFpFXi/BGJAUNCqgKGKac+nZCAMjITDrYM\npV/5TJau+nc69qiLd6hFRxmwMLOBaAJX2GEFIJsQ6HLLnHr4ESyPxTfuVZJX\nxIjFcBHC8E9priPl8R0Mj6nTBNKnD8/HHLZApjEz+9Q8cmCMIUbjbo/M9ruC\nVGsgTCPlBWQWKS5B6lTv0TWOzvvNq5w564tuqWsSB7YoiaUldZE45AUGECkC\nET6czxkLdiNy/IaVZbDIx5N/oLmmeR2o+t11oKz+y2ksHBaMj8zCSYWqxwEX\nuyAN3DOlt6wtc4FNUU9nISJDus6PvtRkitsPa7ap+6F6h18Anupyq9Q61Uec\nhfYL/HlN1lqQuWsnyHHU4WHI5K22RwXQjRSpf9Vj4vH/WOE2nJoTdCu5HSHd\ngR3LWky4JgPoVScsmBA0QmypMocPZw6hdRa4EEy+zyCqgr2TRm/UHolCh4JW\nilj2OTfFtLxBQ9c/0aHalbIpfDpd6DeC/+9zY9AHINOSyBNWGor3A+dILoUr\nGL80\r\n=jR+S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFQBJZdzEZYW/p3oUWVc84HmUGhZqQB2gamcMafCi1KAiBltArX/gZLEpo09GnYCAL0ROFYeeMLUkgDIdtAeFRkyw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.6db58716.0_1629709696245_0.7350809619532432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","@material/radio":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.7da413ed8.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WRDt3eYZ575P9LHwRqKyV4KzxMuSLTNfTQ/8PxghrN6DR9+ZRK2Jgrpc3kLD7esTDnHamUi02M3m/gamEeBI4w==","shasum":"134106eafececa154da81aaebde558c8fbb233bb","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.9fb5bc35.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCY2CRA9TVsSAnZWagAA3/MP/jRNTgU/XZvo9Tqva4rQ\n8135lmBlwZam578UrqGHpiJ80Qq89zs1XEgUOz4FqGmwaxZ9ESqe51MHfRKG\nIT22fA4INeZPYdVAQrWTihiu1ePP3GB2uECS1K1u/nG1A2c1bwVjupSuxHIf\nt3CLCoApJOVAO0mBllJnRPUXdR931HKce6Z4oLML2BM1jYPJFDvKWLTSi6Dz\n4s3kKWrna/kK87m30NvfSDXHp37EVmhHmqzWaydx3QLpwgKp/5X0M1k6/wnL\nILUHuWPdpqctRhTNmFBzd2O+QC/vfZZOhM2qLnDsTq6OMfLpQK3519HCGyDL\nIWYKEO1SKupkyqEdY358CVtgkJnuijhfZBwSGiGAQVlfiidSiGts/r1C0hX/\ne7Dy31TLyC4MzR3vmgwxn17RWTcWmYgAN2c9KyroMQprM5MImd9hOD4IMaVB\nbhePwnU2fNY6Jm80KmrDzJxJvrnAS9/sKjxComZaW/54yPACHSV83NgIxIn1\nGS7vGFc//nzyxx4c91noevDshvy1ICeOT5eKISuGm7b2MZLU7eluaisuwlUH\ngmdQ2f2IMrKrOM5VgecCG1s1iA0oPnqPl782FBQNMJpqrIUEvPQERh8WFcl+\nIYOY4NP4PM0ciLBob0I3SfCMfrTt/rooJt/jd5Y7XqNr+ybutjz3BXo4xMCG\nQLgW\r\n=+qT7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChcd+N9U7mTz1Re5tilOGBGXfUvwygYS7qlswWnoLv7wIhAKtTkpdDWWJxut8wXwAM6apMaZc6tgChM17y7glULaQ7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.9fb5bc35.0_1629759030511_0.27323144268497224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JYUtvP21Thy5SXqs6Rdu2fxyi6etS5Ehin4vgbVZ3MDVH3Rg5Hvat+yUI1mKWJSJ6+x48OBAR/V3mnUQaiucVw==","shasum":"909720010341a17a5de2bb3b23f3619939ce9ca8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9fCRA9TVsSAnZWagAACroP/0VlmPIQqxzsGD6cvrZO\nk5OUpjIfMHqkqeHugI5ur/YOaG32/4IcndFsDzgfUihwScKLN3PfasOtn/jT\nYCGmHbQQUzQ4s33LHeRCemHzep6Cm7NBy+bIPBm2zCi1fAz9068USnJfVg1o\n2MtpgTZXWcvg/KoM1pXV/xPsCKYy0NwXj7lIKxgwcQOeJKj7OrDW/3cW6Oj0\nORJpmtZ4zp5ciHrVskH+/HvB5JHzpi4WZCKLgS7Wz+fNY1VmnY+eXhATi1Rp\nHIz1bSkzdsmgywaPa4IOwLf4gSYB5qSRfmIPsXDSeCF03S40YFQH1p04h6HI\ntpf+XPxNOtDHvbdzxWH+r3ideGCm2u9uXHK3MNV4oO8QUlI1juOWl1E0Y3W4\nlbNY9CExq4AMEbfXiN1HPxs5segQ3ZT62TEQraDXMye3tCaJDTdu2Dio+enN\nFchjEzOiVKoY4/4UMKxOLJd2S31JWUBmMOIHhMuDd1GrMvwmKgHt12VEDNg5\nvXK4mQnH3V8QL1leTBUiFIsIUVqOSIEVg/Y3sna/Sabh0+2505E1YLlni4fh\n7QdCh4z44ckiFcwmRiaTBuUIwIU3/60RuCEK7/sFQBCxtb/cMrwfCVSEoqx6\nipP0Qmfa5vSLsGTIxu261lpMefqy5jpityx1lspunli0tN0pW/tgzJ8oCpF7\n165U\r\n=dcYy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhO4nYW3wYcrr04pqzXdQ5vGizfuBVe1GF4QC7WvrQuwIhAP1VWKvavFFe6liagakCZBJS9RM9b3ITqgaWOOHz3HLV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.ddaa5d8e.0_1629831007226_0.6590250107397655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.756208fb.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-ripple":"0.23.0-canary.756208fb.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-d2mRUZ3DjZSNTiXKXbziXGpQipr8yMylXd1gcnXr9L+GnkfyHTxXvujjgJekspud6shUsUpA8teMQj4UCw1jCg==","shasum":"459385ff75fa982919c5367bc16bf84b3e8aea4f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.756208fb.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8dCRA9TVsSAnZWagAAHtsP/jUTzx0H2R1VDiI2S3YP\n12f2l/en1MUc5Ngpv+Pd8ILGmVXVs55VYRAG7BZHZQ01p9eccTeGAKaVUMhp\nsM8+QCeA1aW6bLSEdK1+NxAlygnwbR466VfO6Cano20VfqCmSJgaYT3ULqmb\nhjcTuCS++tJldKZCbHkQN/pzR7drRs6fjQ5V6Z/v15QOKitfB/m2dhQlsx4Q\no5G2RwuxTWsP3PtDM82lZneld5tpkcBk4NZXStpkGKZHEkNESLL6p8knM0+M\ndk/ZX4o72O8ObJT9wc4rYn2jF4x7vMVM4aQ1UwPfB5YePe0x6dVBaQlGgysz\n3+TsU1jMM03ps62Hz6pZUrBbq5sji1NxX95g42xTl1yocaEu+laC84nJb0C/\nO/2YdggcEeQudv+NsXDl9KAJH3p+i8EXEg39kqWtf8ZlNpbzLT3YUpxa3g8k\nMiHeGh1wliFa21COJmDoyjhQRPS4EiRQ1LRSI8jFcE/vEv1C8jj683KOI36/\n5Hmvbsu91dMNQ1eFDXUS4CZZf2vE3GC8iNJRTIKz7YYkK+5IQLVcRWYFUutC\nEFLnUTPsF3Y42F5hs1pQNjhMXm1exuMnk+Ojkk5aBpetxP0tTo0VCEjHh+I6\nBKQ2LSb9MIicikLWequ5MUGSsDq5ZjNGohpvX6DUHvbtceNca+N2pftc9jHm\nJzFz\r\n=q9+v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp/X5Tur++Li1yQARGPZTFXq6nwhjLkB8EkR7S5TboogIhAIaI/cfI6t8c/gvc6k8qUU1FNAR0kh9qkVLGrSJdKvYm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.756208fb.0_1629921053276_0.38211278582981567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.9576dcd9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tW5cxiPiwNxmz7FefZ0QeG3MOGzCP4HVdzadE7TeOSK/YrO404JM/xLcq8P2lhN0fPfB9tGy+qElVIxafVp+dA==","shasum":"9be3c7ac31391ab288a938dda0207a641ccecf46","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.9576dcd9.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmrCRA9TVsSAnZWagAAgl0QAIMyoHAXZSCodheP4t0Z\nw04OGeVPGVD/bVRM3Fszd7KyRcYQk5+1E6wPYfdOuD5Pl+CvhyJrGThkkTls\nRaM4JqVSgv6EgLFo+xl1x1SAb/7gbkXcE6znzy7Jfuw1ZDzh+YewoAE1glHF\nlOYr3KDcZSLuqfevBhYJGV+PCVTNGk9+TCdtFS9AqgKp1vy3ecB0E28KOvs/\nnz1qvQJe3gI3A2lLP50+3/ZotBAVf9gUxiMBdiDpTCPZrZhpwEleX0dmEnqH\nnu0h2rL05gKRgrqjROHIeef/3WfxXqGaVUARZcsAWtPH0aMu/SkbQ/tWu0DZ\nsmpwrF+9eOLx96VdpfHvvWfr/K9YW5fcm+8NdCqoq64NCgk/kBn0cPhDqd5o\nJwItNxXDrfC4P+LA7b6AmE1M3gb404G2+LHvoYriS0ABKUdgkQDlsA90c7U9\nyUGhRWqCwyTu2s128bADD4MQf+rQNxjHEXVKc0a0xuUfoOb5TaYYp4a0mVyL\nq17wQ1B4BT9tM/rPXAMIjFHPGQt3beex93SwxWRj/wzmWD0+t9pjrhySLJv7\n3DYuR0sVULCrbiAiiUCzZ7w5N1bsuWLDl+/jvb9zW17qMu6s5bWdISab3Uyo\nBokLxl2Bw3HyLOqM8AXSkZBI6l9bxXI9pd0oYvsC+LHXiRB84vH4exQKLLQc\nA2er\r\n=rGxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5KasR8nwRe1mbjYEpdIwQfx1pctrFYeUg+OuCRt/UhAiEA0fzBcLSiDVQr6n7oq7jK0dLqDPIofseUQ5AKS+9AwKo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.9576dcd9.0_1629927851654_0.9486721686038071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.7531cf97.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-ripple":"0.23.0-canary.7531cf97.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BakWvyaPeTJmLZaAAfvtcbyTOBm7BPyHbjgDjP9hINyW6tDlMPUU9o+QsxR9kiIHDlzoA+rj9Lai9JGU+pywig==","shasum":"3dfafda6aad8801d6b627e338aca8d6a8d4e0a44","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.7531cf97.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87DCRA9TVsSAnZWagAAcAAP/0OGijeHjLnHFiUxHUL6\nlAcaZCnt2ttoHFeASwLTljCE090g+Xq/sY5+nNJdFhj6bfXmk0p02zIH5zEI\nuAEIip1QS0EoIY3VkCFFL6Tb+wqNvQJom6Dc7IvsARUNeqP7R5zesBfxBWEU\nlMqDbxBnfpPWbV0cfDxZid+OydyFEpZQf0E9nemqHmtak0XU5MqY4QvF7D+S\nkGlYpwMl/az2qrWfJtjn1zUQimcVDjeiitW5MB7WTK018mb0G++EODhkSsvq\n1ZDI+MeHC857myjWvMN6Nbt8zCb0gMHyRLthGmiaP1EREqG4x0303HoFQLsn\nBTXLN2d5L0/gmVR1NyNdyeAGTo/3uRUDv9xL9077ovk7P9XJiSn1Lf/2JbiO\nBTP1Njkz2v5TJc0FYLex7JnxMLQoPvAWrko59pYfDnc2m5500cAWd8t8l9L7\ns1myMrcYfbeD+hTpQlQ/XLBkNx5+aPY3Xj/tM0DYBzmVqqvGVmcYOLdfgujr\n3YXHcUsid8ATbrGoQCSIK0f2fV4k/rYHgcOF8n9WIPdu+ndHbYCDZ5VQsPTx\nLk211m2naw+OlyIDNjtwaoJT/UY8tMVZj0eRsNgMxBYyqXnP2iGMNkktfRWO\nv1FE6hIDCS8KGf55+I2DQYY/Off7SSrRxphU4hRJY68M4b50ndbYdot1o12E\nA0ep\r\n=5IvH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjU7C4FDEj0ptUAjUFYlTFXGFecpGOj2B0hmtbZSCEVAiBxlgVR8MZzZiSBgvQUYce2YJ58LpAdDjyv/x+Pn3y34w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.7531cf97.0_1629998787033_0.24590913658734292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.3bab26b4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F/qjolJ+Pp2OntbP8O4kw9n4ZaXC+kV4+Pox2ctthB3ulFBbJbjN5weqwqQGEQgydddR3OFRfh0oAYBERGTAOA==","shasum":"6cb47ecd554ecf1d2d436e7e407ef0882828ebcd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.3bab26b4.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAthCRA9TVsSAnZWagAAZzQP/0ZROMTo+1vpIlU/xfoA\nK9yuziD2BioD2ktVVDRZw36QxJlgp+7XSvOIKB9VWt3orwxwUqd5dEj+Cjoj\n/9ZzgQYiwFTuJ88BN/M9vaU0Q8qixGudY/Qb+Zj21tO3Q3fvNUZzjJa6lbo2\nfD0iFwc0hzvW9f+kjCQpocu2fsboSs7VGGVhBMZvNEK6GaKQ8e8Pzj9ARkJT\nuU7K+yx6DsvvVALeaWQPkN5OikhCgDmF8D33RRrzfQQqkWUJ50GTruYQSbiH\nKkR9bkQkKM+pi+4ccFqj+uhY3qMRs1DhXskC/JqR4p2huLmKUXxbjLjxZSQ2\n2nDDqaPzOnWj2CFb5m7GjXelxVxoXVNUqvP6y+xfqEhSSvCC6Wyrp2oeEnkl\n2npP+9QyZHys6ilOIM3DyAlz5FBl75ibQTf8zQy1GHBm7MTmQdSUZDKBk6Qg\nuAlbwV81PNdWZSexCRHPEez5oNjdaQtAd2sy12p4v1nyMDs2PuNlLa0938Ro\n68QGzqSlNE41Se6chghp1bYPuHweDWb4Sj6ndfr+k7j63yRTYylmaIk5TfoJ\ni/I+a4l++E266D4+fMHJ8b2i97Ds1hKIfyEL7m7SnX79KbXxoEUl4aWj7K5N\n7zWfxFV4jed1iKYQ+xw2oFND03aw1ZzrMX55gkprqdKP7kMGgboRwm/08opT\nNsDB\r\n=kfHU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEriBDx/1nGjJGmCpqlebaFe357csB33cb5FNhJwLJXAiEAw1DzC3riQM+XLWYC7OGh5AGGEJ/OvExWNFots92JvUM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.3bab26b4.0_1630014305654_0.3353172542461522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.fab48bee.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-ripple":"0.23.0-canary.fab48bee.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-px1jK0fZLGFQKsne3f1bHIUFRK4wrImhWuDCLZNRVTJosdAY7AxuUAa37dTIppnEMKsptNduBKPk56fecdr1Dg==","shasum":"d43334929248623a31201a9759644e341c531618","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.fab48bee.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBC9CRA9TVsSAnZWagAAIYwP/2vYGRIb01XQmRAPz83V\nMNm2Iuyr8lCFwJ5F2a3cte1Ffet8mdCEZfmLgNktpR+/tAZwwJZ838SzbXec\nPJ41LRfn1eSEZjaeuRIgNkbI3Z4Tt6hDpLcwqPd7OMZug4Ix/X6CxmkKFHKW\nA3JUtLdgY4s3uMY8ybNTDA1PDFRny7cRmccdSBMdwkhu6dbBiWMUN6HOyvRw\nOCWxaf0RxRSrh6ug32PkG924rDtH5TVUsDpZPnDckQhouY/2IFTAkxiD0MCu\nEoT4JcBwGzTIQdZKRS297UvC6gmg/7YfliEU6fn5CPpqySAJ/7XF8YXlGeiR\noxA7NEHEh4LQlgJG9BPlzvZrR8StP2Her071shkRDCrDe9v/GFvpYT8eODmr\np8bIyP6i6n7wmQYK/BaLZDB9xmJa9hQoVWk9wC6UIDNy5tPgAWDk/wH/1jQc\nzyTPD0icxHR1oUXOdoh1jl6NgK3lT8k1A7XJlFoMEA29BNgWma434DIsfHdt\n9ugwimehZ/xAssfkvkOWd76Hl6lQ9XLYSdQMhRNHBR5HTSkk6JswM4VSn6po\nsemf9t653tsiCUTw5Ji4JqyzNWxivOocjnE0sNSlD7OHOjF1AzXyfWF0ECFT\nHqeX9hqhEoTT/7qRB8jrDeukZb/H3ZgveQeE9wfFjx1HSU8Q7M0aL6TlDisx\nedkX\r\n=XIYd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCG+/i4zWUJ5kv44jwXfbP6x8BLFHg/YnHZrbioeSs5IwIgNIZnlVpy8Gnb1QlDZXVYgRbqzWnWu34OTjASoN8M2CE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.fab48bee.0_1630015677304_0.2367669639262946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.dec18df7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-ripple":"0.23.0-canary.dec18df7.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4BnSfbyR45aW230S7UAbVdsp83e6/SABQmthUWmE2Phr+euput26UJujO6uvy5qE0jOuh2nmYTaHIy1QV3TQ2w==","shasum":"b596a2b642b98b9527bf7f083aa39380524cec54","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.dec18df7.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbYCRA9TVsSAnZWagAAcskQAIsx80H9T/8rCxIO0LcJ\nnrpT5UqhPPo84w1pn7bz1VUCJASL4o+zQS9HEROR151eIXOuQFIt/oetNf7p\nvcN14w1iIq2Wz+fNt9DUqANixalTSFls/5vVYv5MJPMORbRBuhpxKgCE0ugt\n1f2+xHY9f+ZxTR/w3nYiz2kEQCPe6A+A7LwvwyeWih+vOIxUZRrPNoAt+s/O\nfGUIP8hAUnzg0Z9Sxp4e737MpqTkdR7V9GfTA59s5nGGvOPKLIhJ47K3ftcQ\nxhqa3fFBrYNdDez8MoIoLzZgbp5YIflTcQ8JtsNuHX60bWIXQFlaMbXtlu15\naY2gdYpxg6h9ezMndZ0YZ6xCKwDyZsvmusEI0TRJ/CbHdjIzpDW/pNAFGwzC\nDBOC5pMPInSGTVb/qi6EDJuPmvh8WHLJH+b/Zie3gyP+Z01FsSVgCpzhml1d\nXP8eNPY04LfMMrZ+QMeQ4b39fYrt0tl3uLzw9M49yYEQF5jGYw2gWGGMWlrf\nof9CpH4d+mbXfg2CCSze4XKaPtfvxMnba2pacOLA7rfrzpItv0i598OEa/sM\nkUBdt/53NXVVFytAV0jvIB7VTb/PDHteIKCqYKbWPPk8RKoz2XH82R5Ma1yZ\nTlgVmrLRhDqkwOi0IPA24MOi5HRfquWyWz2HbPlIHJv+8jPydsdf2U7sSu83\nJ3WY\r\n=wZNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFx2Cem6Cfmmw2C89+lrrXwAhbaCsPkTlRLgIMwG7V0+AiEA4rmfy1NaizGOdLUqhM3xetLApboi/UD/vkIUGLvxeWM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.dec18df7.0_1630312152449_0.8442474381224596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.61fe5b17.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6R5Zx5uWlQKXyWyYJaFbRVmE1oQZwNbvXYfFEGSTyQRN1tYj/jYW5kKydEw0/nwRZQO75QfhLqK6RUVT3ln8Hw==","shasum":"b70b0c1042f0cfe70c40ae06a1c245b91993cb96","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.61fe5b17.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTF7CRA9TVsSAnZWagAAmqQP+wWTwV1DJFt009JSo/cs\nbbJCEsuZu13tSsJPxCSb9xWz5GEiXDjhpuhWc+IVxhu42tuhBA1QzY/Zihgd\nSaSmiebq5ISh54xt/zptE6J6Gz9stdIIIbKyjlFvEKvogbfEOUfKCgrGsC96\ngyii9tRiP0OLUtOflEPthgVHFBbpxdeEtN8gmh6awSA80HJU2TLzvF72cI7q\nA+EKAGFTdx+RFJYsN/XlgqSRpxVufMHbTOPZnT60ZVOFiOqhQXlx6/07I11n\nEC00rt43rqVteIqZieUeKdkGXHOrFi3Cg6PySoVo1h3QKcmgu0RmadPRqEjr\n3LQMETTCcphKVae7urftRN/Xvw0iEVSD44ss9SdgZwyHyGPbcGVkBpAMbjvv\nZ90vJgK0l2kZ5DKazzB+q5wKQLhYnJ5okYHhxMC3lAyJygErK6WHgWb0OrXj\nDqA9wMwR1nT8ToQP4OWX+r7gFlXc1kUuSh7YE9sh19SPbpexL19TQVWiNrNZ\n9e5CXhqbmfoiR25HvxJLDNbhbMRUmRhMqtMPcNnRdAumNXteIuCaOWNF5Ieq\n86lUNx6o1jsiRJ0HZqd3JmvGeekyWFOpghAK4X4B6LCHxHMYlYyrpOa/SMkw\nMWVU/CscLBvWTJL8ulSBHxdsjapjXxrjLYjbSl7K+XVszM6I1VBPsK0yweIO\n26f9\r\n=wHTc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNxPOWpn2icatIqyFPnzvNB0Pd/j9IbVphnSu9/iL1nQIgZErDaOCvAsT+nDrrbYIRBbZYdS+vTtwzPL7a7/ejg10="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.61fe5b17.0_1630351739102_0.11377529485083082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.a8c31f54.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JItnDCdNyb1nfYy/zXKnOQVnmbjBijvXnRzbWQ9iDRSqpXI67h58XHHIAzFZAm0OMWh8Unp/aA7uEdsjV+ozhw==","shasum":"752d5a3598b9bd7b27beb17c8332652a2d398b5a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.a8c31f54.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAyCRA9TVsSAnZWagAAgVwP+gJX6vkjo0AIErTaydca\n7PMCTb+ax4YNGB69sJzsJ1bJvK0i5fFBFwJFZiX3lTip9wHS/YkRC9gEP5Vu\n3glL7AeQOduYlbPNzPufSTm/IPAbBx6EYJPxi11ion1IddDINXeSMNHUCcPL\nomVwMF6doMwhT89eZSZwDXEOmoViGGCdWbF1I0ofALpvF9FRvtEa4Ls8Bf8/\nxeEUP3UlswNC5Gd/DJLNnqKZGpqbLh2LPaxnAEOLOvQymFjTieRnhKruEU/U\nabUJv36n6yxXvpDhlYTU1883ul0EHjHkkrW3BsOlunZdvpzKzC+aFg01XeFH\nybDFmndZD3oPks7sspPXMTIIsYDl0gsLX6Ogtz/OPmxfoK/fGo42QXMYUUJ6\nszhd/SIS9+EeSr8LFT/jF206Xy2WW2EU+dOB7ian1YQuvWYChowNxi/5twR0\nXOaSEHkWICn7I56Y4JHmt0PjAIMJw9i7hbwVHeqoBKscpUZVv3YTHAAbgYNw\nv2nTAC2WHeNOD0zi5O1gQzGyck5BfCnPDhjIpYb6cHd4rNoDPYIrmCsslPTj\nBl1i8vCIbU4zeE2T5qEtwnDhxgYj3jQS6Upk2vkzlRECIobrNEtZsjb/Ctew\nghlQuI+m/hxzGC15A9niNWsYKhMR4C7Y+0IvZ4I5Dp/tfgd8CAoBjfnE4/lh\nK9nb\r\n=Hr4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeu/x2IAxLLfR/WD5XM52JT5kzaMrhK1ny0LyXfc4VkAiA9HV3aFsr+eqSRl9aqRFi70Gtk7eK0FRVZTBD0TsDkuw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.a8c31f54.0_1630355506455_0.05224770359547937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.a096dba8.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-ripple":"0.23.0-canary.a096dba8.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z/RN8I1kAhbRUKw+ZXosLoYcb67sDWWy8gCY+JulHOpzFxFTPar/edTy0IOPm0h1JTJ5/0JarpGxZojN6tPnNQ==","shasum":"f074d4c40c8a16a82d2f926249c19591cffcebd1","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.a096dba8.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrgCRA9TVsSAnZWagAA0P8P/0p2MvnIwfSHpMu0oUcL\nmEjuB4kUn+QUB3ESuhR/BlBQ31339QJaJtJGi6NplbHrMa0jnj7nZ8y1qjko\npOkzjuqppVU1HFjlBI2k1d3JNxXRCygM7AKfNsjrPunXyHDUKDnCyj8GdENm\ncIyMaYK8QalsP3y4qlQhSJ3UTLdXXH5qOgAOGgemJXk1HUvztilIQO5eqysR\n9i2QQeg22hPoEn2QwJ3uIUxHDe4ZFgW4wSSYAlDUG/x0zOtV/gHTZtEqWjpp\nZuv3ULELUuUB5s+uW9UTdfoBickEFTuaSQia/xrhB09K8n58+iSy3Xysh3Fy\n67qbi6MbI2OwrjXriAJfmxIKVsTEpRYfVFZsJvAtpoYx9sm1xiPcHPgLO7Za\n07UPjHAY59qZAcmmEDi4sa+wHSRf9fsrPLlM/KJYERze/AWm2kpjFE7DC+cp\nNnsG1O7xsIBthGMzN9nMtmJn6xMh2Tj4IkWksrQ+Vlsrmjr9fJrq8mXTVcFV\n7R2WiJNo9Wt3fzaQrjBTfrbTHNNXNZgWpvGl3J3r/kdORg3/KO/NLMUN9yRg\nN1Bru0Rt5fIXMCUQjK3iLA3OJhATixs2kKzWK0Asce28PNPHtPDY722NDddO\ngEudJYXGG7jetMktKuK+0Hswl98p7pKcdYKDWQqc2YeUPHVa0XTmoeXsdN9e\nVvFR\r\n=8J1t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwPMarAR2t9GAp2ZQ89JLbs6c9CIYaBRDOOKaYNxvigAiAhOXjS9BxAzyk+n/APDO2M5W48gYhQiLZyf9HIkYPovA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.a096dba8.0_1630448352620_0.5986521294114144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.7ec04d47.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lgvrnHazY+63BVbAoh8R4/XOyJEQ34S0fRKYJGAVDMDiQJBROusGhf7v0h4p4fhpYPcUKnttGXODC0XRo0SB9g==","shasum":"a7db8cd2185e2ea98553ac1da48a0ffc0671b889","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.7ec04d47.0.tgz","fileCount":18,"unpackedSize":99674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV12CRA9TVsSAnZWagAAkdMQAINitAtHVOJT/QFZOFvT\nBMnbinwQRAa/RHrZWQQ8YdNQ8dBptnZpZUbwt7mpchlZI8ZBnNvZ8OQkg3bp\nGC0TbOhBZxOf2yGEkfmHL8wcjUXv1XrCUUkNd9mqrXLS5boreF8ftexlrCCg\nvaULc9iG7j+IyaxqpcqZevlct10fzVc+KmoGErlM0KimCT8nisxd4c5dXK3H\naGU7nxybMEXNyr3efphIYMHH8//CKPbrpsaAUUljGCvCQKsteVTN6YcZG05P\n/unjYeP4JlU5Y9jkoiV/Vn9UsAiuWJL0fp4UqSLT3VzcV+XZ9m3ApWez8b2F\niMH0zyjTgNK6HVMUPpOkcxa9G6y4OLeLUwwOfkKM3Ao4/XiItQWcp4DTSJ2n\nABjmPuMGl7QCyfvLwxNGhQn1rymEcO7DoMBdz3tgzq7CKuHJSyzsswdXJufn\nnyR88SO2KB2Y/5VtsfmEd63Hj05IytOdyizbF7I7Lie/mdaty8MnbRs7/bHK\nENdWcApVcUa7YWx/kOlP6V2jJ/W1aSGRtKKO/PBKLA10izEjvGVoA6AxsKUw\n//lWutn9kchlhBsaCx2L+hGUgUP9MDJI6OJEZ9fWXkoeAM10DKjHibmwT5tL\nJlHNmVNtRmjLMzew7CJjkEZSiZ24gbwnNsFhicSi8vdxlUxoUqwAxr2vcNMo\nPZUH\r\n=j0H1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChwie0Ie7in6Ln43nhPH/+8FfBrIwe1zzXUoMIyRN54AIgEWNWmRcy6BIVZbMPDWwf5YeUFhf9aR8OrGEECGDvUE0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.7ec04d47.0_1630625142856_0.412489076646563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.d00b098d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-ripple":"0.23.0-canary.d00b098d.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-leKryMm8eLt30nDGQ/iuuIArQ8Kzg4wlmeWCbjrdPrCuwVGxxkPf1e54/hzqqjuY24g76pJQO7QvR4nN+p1Nvw==","shasum":"e9a86ae044cf0cd81a16c830d8954de2c0f74f0a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.d00b098d.0.tgz","fileCount":18,"unpackedSize":99688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMfCRA9TVsSAnZWagAAPc0P/iidWw4W5rUVWqJF8QBY\ngB7hv8TjAaiFBfxVC1HvvXRrEMBV4TGxBfje5URO+Zv5Z22QAC0Ewe20BJ2+\nkQIm+zzH+JffKR6hyBPgt1622YQe3QfTV/kmEhPfEdOlcJF+++iaKeTAuFNX\nEI65IpKT8fNZ9Y0qTUFBUhjjb4M//0bNBVjc8w8PPxrHuKZP0HVp8nB+NZ5H\nRn+zv/tOidliCz4GcJgRdr2AQK9w+hfQb/80VwXi3gy0E/4ZNBwg0WGJVr4U\n7yTm+NERTIKYEv1yutPIL4lTYkr7EadozHmr3jLhJhlfmR4niMEarD7EaZ2m\nQL0/MOFjopTGQZ54unnqXLfRVUf/Y9DeYIOgBiDB8cHocS8mQDqTvYUIFhwm\np4oE6Jnw2zsYd021XJ0W1lQzg/vbWxWoVKravCICGdaPFzgHJw37BOgWkG++\nzqIhJfP8AieXUKQRzgJhZee6vCdh57eG8+IJtrNtI1zmUR4NJXjH+8JaQnCU\npxjS9gFaEzqOT1wrwHLtMD3OC5mlzccEmaosGSygxATjeZjhw08ZqWOi7/+b\nL9GxOYPrDrJt675S7K7oX14r6goT2Ivmmd+qE64GfVBlzOxFLQd3ZhxnNmV8\neVirFSmIBfN6k/Lez5jlwYio/cXEzLuByuQE9ZfNTCdwxiwKc93+MeQkUkv0\nBHjA\r\n=Ki7J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLdNH+fHEttVm28xxSpkfiWt5MOaQdgKoQLNZrXAw7uAiAPMNk5wY0zAb01Bg4pBj54cAf2pTW8gjUHGQ8mk8ZmiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.d00b098d.0_1630704415806_0.17535721859104125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.f29b3352.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-ripple":"0.23.0-canary.f29b3352.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KVz1UroWFW0evkzbkKLdhVbu0FkREmIo4ByuUvPTVwrESx4OyXuNZeQtNBphn3xjJVDXw8atqsk1WG/Z237Sqw==","shasum":"640d928be205b193a0a4b42696723d0e50aa3849","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.f29b3352.0.tgz","fileCount":18,"unpackedSize":99688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6x4CRA9TVsSAnZWagAAKmMP/jgE4o6g+ACzcXk05iI7\nY0cr4s50ItjRXKHX+0YFacyLaz34g7VTCZ27IoM8mNRrgvBspeIacapCWE/r\n2dfxsQBJfv4V3n3iTp/xgEcvJT3DiXv+OguU7m5puisCPhbYeCOHZHB+k0I5\nunQQGnzLsVAfgFtNoYOOGDnw8IDnF7NESVdmlpFdkbsMq83KzrNFLhGN6EKE\nzIz7zPiN/3ROIxMxU/y/pSAwa2At2RV3xlW+TGJTVZKGZ+LgLk8YTyC+EWVU\nXElMNOZSOEBsE5yhmZiwO2Qh4WYL16FmbKeH99UxlsI9IbqPRQDdBRC8gz8z\nTlA2A9wSJdAyaV6BOWULevRW9ifOZt0CsNuLNr2OFtczgo9pI1QMUIrSaEmi\nb+QQ9WpySzHxmRCBu6RRw0A1ybYz0xPZ46wPXitZTmvR4EmJ5grXx1R8fA8a\nk120yKG7wQiSTh1PxyV6tAUmc0/Ux1LIK9Zt3UQfW3sSQeY2gmytMziRI1/o\ngoTC+P0RocA5n/YynuB4XCRy8TRKdov5fJiMghSljUDjUzLaF1EY51nGCigs\nmbMJ1wipR9YwjWGEesixNNM7aIc6hHLwZ8ftVrpaW1uCnMkk/BZ/AOlZlx3B\niCtxQ/v5PWkQBdLx2Q1NTBgjElYR4DwGKt7O6W9ME84kzwnm5IuiOIJEwi+v\nI4XL\r\n=sL8F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/91ictRwavQo8dXFjLWdQUCDhpsbHvsR3M/35FEZUeAiEA0QUex9u0G2Jn0Jm9/6GoS0UKnA+shWDm2MQfxjrPzGM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.f29b3352.0_1631038583856_0.6443351531296215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.4962a163.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-ripple":"0.23.0-canary.4962a163.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e/drQnaHVECsc5JY9UteNfrm01CmONcCT0vfjvLuls/aIL3siKiQ6fOCWhK803anT7n1AQ/XQ+3oC6yUdEUYCQ==","shasum":"5ba9b2bdde94dd3dcd12f433936496bae9ad6044","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.4962a163.0.tgz","fileCount":18,"unpackedSize":99688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/t/CRA9TVsSAnZWagAAmDQP/06+qE6lgB1/fwB8cOCm\njYtb/kVoJBXZkj6PZ3lClTJxEJsmGjOUyJRkAuXT5WKS+lNn+yvcsQ+qyO1A\n7Y03lfKTsY3UNYDjpwATymZpnuQqz6u27I0Exp4MRCqjEiqZgfPnWq/U+Zxi\nGD89Rpnf/dvDrWwlDlckowL0F0Q9wd3595G0We6zTKem/E5ZaOrJTQ6xBx8y\nUcMhgMV+i6SwSgfUOzM0jXzrHZsPyGBH3u4DxJMlipZip+X3x/slvgFbAvEy\nUYtX8AafHywuETP+laXclkb1teTXydM7vaqauUWdR9JcX7cIlO2Aa4z9F2Y5\navjnzoLjbnRpQoFIRfXE6QAKcF2KlswjDzeUgbjPatWShNjS2Y7JuVLGldEN\nA4tClhdT+8uH4QVjKrl8PY9HbhRSLwMA3D5vAAmlNA7J0r0JYXc5vkV1mCm5\nf0D9HuowJP6nXUqdiT+nMBunpMlRk8TEjtYvYYbqNOdhtMR8jfAAmh7/UOym\nQXYPW/uIrzqU3iZzM3R8IYlCcuBD1z6ZPHjVerf0RZ59Ofy7hmoeY8ZVPrqq\nt0gUPB9MPC8BltQo22ABg+gGQysBYzhgf1Y0SOVa+uYaTs82Jq5K/5QRoaK6\nvezcBU6/Op7zu930M572SV3X/jxa+5m8vuipC4ayDl5qXO2Z6ORpTg5IpB9D\ncMmp\r\n=2aE1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHitiW/wd7vcSl0BihdUnffdy6JTPVNHYwLa57iCZW4mAiBz5wnzATD4YNhJ9Pv9i1OlBccG2jYpHWSsTZHB2sIrJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.4962a163.0_1631058815438_0.1671117351035072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.33102bf4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-ripple":"0.23.0-canary.33102bf4.0","@material/radio":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.15981e9d9.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UebnkNnDWhzb3pNuqngK5qK91AhKuaGN5Pkhodl5zTf0x0JUac86JfvAxSJCMWO/Ie5hQHUPYmR2U+kf3BgD0Q==","shasum":"0948c3badfe7bdc3a4dff47128bf4e82ea568e40","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.33102bf4.0.tgz","fileCount":18,"unpackedSize":99688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAA9CRA9TVsSAnZWagAAp+kP/jPtfsY39YdCAwITaMf7\noYLJbOL6dp/W9nEznzPnWgZegAuENrBb3OJLLAQA0ePgQ8I+GnmlWxTdNEBp\nwyKdZjkWyZzmJnz/O10P8BsQ0aTveyKaBqCNow/LlWlXSWaZxTRVt/UzDQ0G\n9D/N/OYsavd1MAFXSvJ5INZZhM3Rb1TzamFZopi+xJrlN5pyINPPiIkgmJPT\npG0L0Ogdrgm+TYKhFB2YVVnxMxsZUM4YT+IoRf5V3eWtXvmttSzzcYpezo/K\njKlWeuz8Is3X/+G/wR5+y9936+TPXPK7e5dhuwHYx5NXwr8F/Wc6NqotRQ0i\n4g7ke4OqCnCTz/94iW9i9Ila/AdBXWTs2ChTdEEoilIfCLAYXoxlNxcFbeYR\nKxU6jVJld3DZMsFLmCOmXIWOjL//kbmOX1fslH3D4Ya8cMoGLv5ZUL2I7jQt\n1ux2AFsDlWr5W4p8Q1ZxHUnQRxzXVBYkDaeFIFyBjNLTfO6CZF46vqMumcmK\n5HBWSyv2hwm1CjFuEzD04O6VPuXu4n1oCIUpqJp221kxvHNGFLdNv9NsVjA8\nIbOF7vuRsNVYW/A3XLsv/Jj54mnQbHmgvQ8JYq/anxgmgSAuf1NGoZxJcgEu\nxThREcd2knPBsv38R6R5N//fWIFGxVDWL163yUsHUXTcgGxL5Ip9AJY7obL7\nsmAj\r\n=lryk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHF8gscCFhkJG9ArWeYjCGg8lUwLapP9gkSGp49UR+IwIhAJEIx6Cf1g3mE3JCIizFuMkZVhgA/xX9UUDzN5ZJ2KWE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.33102bf4.0_1631060029301_0.2285786296909107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.76c68381.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-ripple":"0.23.0-canary.76c68381.0","@material/radio":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.72464476c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iOWp9ggDtAIhxP0wq7jqxwk8AH97++eT297u2J8WHr23velZIC6w2gcRiU0sle4CWFXnSk57VbPmWlKcLWn3ig==","shasum":"cdc580f4158c7a90a3da6485e0076524c89bdb6d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.76c68381.0.tgz","fileCount":18,"unpackedSize":99688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmICRA9TVsSAnZWagAAJBEP/j1q/583A7XXK9HUAQqF\n3PBeZpx81TDdBgUZexOIBU6Ae0uN8KGUaJPfxYuHgiAk45c0SZakI7EHQ+03\nCMcaZO+lE3q8Gu3gBLIXugvfSaKkKGHMLR7oAkpda3/nBoTXAUB9IIrl98fz\n3U9RXuR6MbjEHj9yrUZa/yQjh3bviKRpxFRZbzLyXGVr6W59ZqcnAXdkX2Uk\nbYg/bz3VLUd2B7nL3xxNBrm0Y35i1Z8unSVDsu1LkokHbGMzRif1+k9CRPZ9\nBJkgTXnP7CCkkWq+Fs1uzrhUBZsXxQOtjs+sXeLA0n14s/9zjiUGBfMBMjvq\nUyYTgA25DyDfvAd2AznPMYDHGG3PkDLbI1/g+1clXxzZqy7WLrk97CGOyrDp\nkrVSNcCexPVHSlHRfp3+5AfIpgin+RJvXvQFcPu7qtEvOI+AxvirQoxbD5sn\ntkpjZLs43lKITBtVWskYVoCEdgkZJ6Z5qd5bPl3MT3XohCFRHwl6d5OKAtea\n/07CqIOoqyHTeoT4RyeOPh1LRHEgx4lLiYOVcbXXob4gpcABe0lmjnLW8j9n\nm43X0IKjArw3k7myGVG2Prclh4W7K6RFC4GQqz3A5XG4vH0b+gy9kb8KONr5\n8u8AZV7C/7CTE/FFQJnN+qA5ZGC5/B/qv0omgo3h916gnug6w4y/OhM0u4pb\nU9Zu\r\n=Tn3u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPTPmPC22xfwQyov3thLuAQFFzI597igUa9qcgX2Kg3AIgbWWnYlwqyK1tNgDK0NW0l0L5wLIBUrXz2fT8IVjgE+A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.76c68381.0_1631132039918_0.03438140165876136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.17d51f76.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-ripple":"0.23.0-canary.17d51f76.0","@material/radio":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.72464476c.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a2OONcDNwHDxeAr52jOQJn+buINJPod/malRseSDlKizw1mKFCn0eVv74zZ3f9wGVLwi+WMhQeUL0uA9kqBv5A==","shasum":"ff80dead6a786adfa2284d30176a8321a8a3a3ba","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.17d51f76.0.tgz","fileCount":18,"unpackedSize":99686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUapCRA9TVsSAnZWagAAb4QQAI1BXMpc0uYMMDXzT+8C\n6EGs/0TGu9ZSobWm2PteoxaVYkp6e3fhYxCsWXQNSJIOzhf9f+mRMK3/YL6Z\n9EoKtHD7QJXf+Q5K+rnvVsFk70pjdI2WFIh79IJmOYdAIoqqJq/40HO5DAi7\nNuKP51/Ya8YFJ6j/RfAdoPuwCHUyZw/hu6Omp3uy1cJ7KHFdNvaVGyXmluMh\ne5XhsLxuYJ6zSDm5MhR/tWh769h7jDNzwfoSdhAggrOOw635o7h1Owi+9SzH\nh6xaWF8AqgzQaDTchlxgIRWS8d8JFR7+ecwTpbGN597odkolacMI+cBYHq3E\ne/kdhJK5k94Rlq23pjiNxUOiVxtAAbLyy/0zSQUm6TWzsMBgG+5mJ+lEUM0p\nHo7nrNDi+8yZXLUC8flH0gsMs9eaHAn0kpK2qASDBH90u1m4qclwpE5t0wqB\nBHDcg5ZbyFI+GnvRlfeE5cUiu57Mzpvvmuf5kBIr4pA191HzOrOxsPJRQkIT\nzBnL+ZDtNfF4md725DhNA7s6c/Nfz9m0z/DzJ7W8EgBQDEObZq4n4JIDg/9Z\nqZ+XICKhE+fjAEWDi/5Zslf8sNglhP9T0YPZHplhyQ8+aL+J99Uoh4Ge6dCB\nMnTpA7eg6F2EAwHFZGIjVqAiLhlA4t0rdAEJB0MWzRZNaJvuDv/yATyAEO8m\nA5wW\r\n=acpR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANm9BTbD9vgktCwBbzMxwHIJ1RxYL3YqbjT+yLBnROlAiEAiWRUvx0Lh9pY69w03vU6wU8G7QA8qUhXvMC8P6jz0W4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.17d51f76.0_1631143593756_0.7354243920855783"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","@material/radio":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g/cbzIti3X/V2WjOL8Uo12k6tlsyMTcBtwh53vkm0O140CD6aaP4SgsN4VSjGsRy1pDyxUQN0B3O1sLTuEJkog==","shasum":"f99653b6d9787e33aa20bf962bbf378f633b7789","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.3fae6c2d.0.tgz","fileCount":18,"unpackedSize":99686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TnCRA9TVsSAnZWagAANXYP/3L2TcBvAGiYOASQ6V+n\nI+/2yfTdJi8V3VsPgKN/d76g3P8GtHu3wxL7Ay9pCQW6NYYSAByfAPeOt1Fc\nSpbYjGqKyLsj7NTd/ED1PRb4M8FmazgLCCKlFDhylEBeHN+CMntvXjs+MHJA\nGg6fv2LXsycPcgCoPu/XKAT/LHDGzNR1qf7lKhsg6Dn8aTfwydgMuXfXNyNq\nvKNeOMqyBZHEhBVEakjaeib12IiOs4SXq6Zvr0NyUb4KkK2v6lZtdFXVYVuj\nx1C3FdSiDbeDuQJji3rBC+xdxbvXBap9drgpgrut5lpMIz0IfO6amvvvtoyr\n7RQNpquyxxeT+D/umkQK9H35ubeB2gyAWxJCSKFVoccasHLMZI6Mkrars9zg\n+xPAocDvQlwfoUfkWXabm5BnJ0xx2FETwESWaElRn4Wb5v5wvicv4/Z+eVoH\nfGf7h5lcsybsPg9TkBAozWG4gPFYjmSWk5MZWZjgF6YZobEICzv3hH9nnLtn\nEXFEiIjaraRh0IFwOvP7aSXOqkaRHfiFcFBniP7fRZOPB9YfH0UR4ivudqB1\ntJFbaNHpDW23Zq6oJnG6ijHX41VFLBHj7Edu/mCET4igcrUmDRKzy22ILHnZ\nshsAlRVnlIwn4AgqS2jwYcDXwvxptg96SDOEDNceep/bGar4YWDYzgQM/iOU\nw9bn\r\n=6hJb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOVBGI9s11PmVo6V9EHzVGgmhiQ5kTzFaOQ/zcRgRGVAiEA97MacoXH4De8msm/ajp8njgO4G0dSpVFqMKShkpC9kA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.3fae6c2d.0_1631298791416_0.05888763476757908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.f1958c4b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","@material/radio":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2AKC2Rv9dW9bR/RJgvas/NzQjdHNMiSxQzKOTqCT7YEvJo9IS0YDlLbKaJC5sR/SsVf0og/AR3nDKAlZVq6uqQ==","shasum":"2857ab83240cb916e6645432e0ed55cf2a1103fd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.f1958c4b.0.tgz","fileCount":18,"unpackedSize":99686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SYCRA9TVsSAnZWagAAe7wQAIINdlFpHUk0TFoevrhJ\n4pAZ2KKoBn9I9DxPE+vI6aQnmOfVDFeDLbXxv/y3TEIHvVges54veX4Yv9fN\nN7Tx9lDuUzTGvJ4PsNzhHaNj4j1HYpSuT6fGNTJEKk/vZyiPEsjhSn4/C7T+\niYPfTm0lEaLEcHZr+QDXg0yzzJ+NtoxYPhn5nq/Y2mA2ONWidhPFdo1mamQz\nL07OPiij7w9YHhGY/9LIhs+PZd76lKEarvx8MdNMVT15ZY1JUR8sIa29+LJB\nthZVFPMQkfRhdSFRUwKDOfWGo0u1QvIkRhhkJsbwlJEo6b/Qprj9mAmLnLor\nVIMTyxuDpP/L4hk4J9oH0udiS9n11++91zMTnI20VNDdiAJhFkkw0C39FhFJ\nlzK6R9+KK02VtPeJuZ1gjBNSFfNE1nmqiPiscPqHevoSnZCruo3qH6r3ek2q\nGy03S19X2v2lv1GrzWCdkbMsLhIqptxgCPorox4pJI/k4agj6jMgIvkKEV7u\nJlGzZXm5fqxNKOdS4sL5p2SQ+vJ+61N2z5sjUq4Lw/dt8oHZQPWm7x/65ex6\ng0vjDeNueBi7cpsiopHy4HZ/5pltveFApDzOtw1K7Mn4FvY3xUz4LuYPY0cB\nKjxe6ZXeaJrOHdVcGQfne1f38E26Sjmqnixi6bAaLha1rUvsWfEkG68nNdhp\n8do3\r\n=NDhF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHNBFSSTs9Cl60A1Yl1VqoigiETZ73iH0XH9za+o/azwIgAX/J9bSbOgyU4/5v56vaPD4+bMAaQJYusG0BMRcTaYY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.f1958c4b.0_1631560856600_0.9859604454700912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-radio","version":"0.23.0-canary.78abbd59.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-ripple":"0.23.0-canary.78abbd59.0","@material/radio":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0gbl+k0Eey4RPck5Jb2H77leQNqFyOG0wtzonV5MHK8gxFV8CQp+hp/OMcGVggy4WKyUEuUWW+DsfBrRofvQRw==","shasum":"622cf0ee6449acc4d70aff22ca1f3f1da2eb885a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0-canary.78abbd59.0.tgz","fileCount":18,"unpackedSize":99686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IICRA9TVsSAnZWagAAaOsP/jfMe8mty553QHPVbkxp\nmPKkqIaDLpWuy5JYVCQnCrwLQAK/I81kjvaO79hOYQ7TXSNUw38/I7xgS4Az\noIKvAC7DY/F6Pc9kTSyp4kHMd2SJXXecZrBg1KO9Zfw9FQ5q1fOxl05tCYiv\nXijXu3Hhyt91ptVjFj/z7XIMoJQDsuQOsESnfFqq0zMA4nNKg99GXbf/UhuD\nOCJKIBJstsyWnFiymSUaVXRu5IOkS5U3qeFKuHAfYvMxgagHmruw3q7Gmqrn\nXumfQ3e1+g8SpNhhnYDVwpdzo4Xv1iDuPiJuzH2oqD/KvcIRuwL3d24GlQoW\nTq25RYKVC6pRTGlQ/gLu3WTgXutVDLo+bZmeYWced+flXCtkz7W35y/R/aSs\nrdath9Qyn3m2wEMu5gOS/Hg4MjLrhZfn1s2YlRSdETBPejssdNhy+4FYEAtK\nFvXr3aaP1Q5TVU5Adyy7GYyH1XbcuJMnkOKpsxdsIxLC0PG99Y9r4vD+wWb3\no/XGpwyoBi5KtJAmdIgXO/TQmeEDkSG0eJWdmir+Ck+r40f7CEl0c7H5/h5I\nbClV6MOvF/jgbbBjtOiXp/69WJdk5jOUYKjVL0IIz4+wBK71ja9WQJjDv23b\nkS2LWwyU7Ndllk90TjYBQIyYJZ27lYIOR7vjLV9N+38MSAiWbbFkQIoP0uQ5\nhfpo\r\n=mrKi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPJ3jqzhy0VsfG9r3HqvB3SyC74FHoibCtTZTXHCzRmAiEAwL3DjPzF856Cr1vTFF8+y+KmsNmaUzkvOGxsalZk8s0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.23.0-canary.78abbd59.0_1631568392279_0.38653183546268854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-radio","version":"0.23.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/mwc-ripple":"^0.23.0","@material/radio":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-9dMBoXCYpEwrjsHIk3PizaR1hb7RQtehp5eb6hsYXLpaRQwPPl7dqzxKmowLDPzpb/UCDh4sJgZDRZJe4nOnVA==","shasum":"f218f632470713c9eee65fe5aa8b6c59cc72dc0d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.23.0.tgz","fileCount":21,"unpackedSize":113464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q0CRA9TVsSAnZWagAAi9sP/29y3ZwsdE5W0qreHvWh\nVuH/rH3ZIHen5LWByblDFa61kCbpy2aSrmunZ5idYLv/UtmjvoFSsYEIC4G0\nppq5UO0KFjVWfmboXhfvzHyQ02BFuwW+6KKrQzS219PocodE3odOCdMsLV2l\nyYTwzzYvcTTHC6pH5TrgMMc0utYYQW5OpA3/Ul0C+0rf+THH4cfGpUbHg6ui\nkTAr3xnwl1HzoZETNVI0PeojvS5m/sXYmfFQFrpMQuIr/hcG78ZSIRLOg4BV\nIe6Vzx5qKWIxLF+6ju+DfVyat4c+SQMN+Pr5UAv5Ar2xy85KS3Uim/WwDYOb\nXHyijyojVwvTNNc5dFV2aSIMy9iG3jZcXGzJ00I2gRJwD0qRuQb+Ychx3sVE\ni7mxvym01iWuJdhT+UeYER55ak1LEixLbUrYzBo0QfqVSyb5pKEwZ5K8I6O8\n12C9f/eqeh0DRtRlTSIFjHQ7S8udi8VVKxMLG2gdVi8RqN5Rg8s2YPquLJOE\np01nqCaqxuW/tM1onfv+JBJffBCOgA63Oi6pCPXNKygezE4RK7uQJijRXMdo\n/c1QdbFQzcrH+skRgz42Nnq2AbtPiAMqXcmDwaOX3fazoqN7cZ92aSQjb91o\nk1PH7ksiK80reBM5amp7cK+bqy1X5GqLNNydoUKj3jP0e9oC+emHEpaV9HmQ\nQ4h2\r\n=78BW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJx+17a8BeG6Mv1xp0gPtDRwvpIFu/8o6pZO9ikoqY/AIgV7OwEN/r+xLusKVnYIsFJQxdQEQAxZ1R5xHd1N+7g24="}]},"_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-radio_0.23.0_1631568947837_0.278399200569196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.9830d665.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-ripple":"0.24.0-canary.9830d665.0","@material/radio":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.864798678.0","lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8ywTa6zKVGWaMNFQPXhMtI90qVNWJP07LE29GJsw/ex3hiuiGAS3OdcvpRhCnKTKWRSgTvKeG/SA/A92HZx3ag==","shasum":"8e6dda8652dac66bf04e666974c06c89ab461ff5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.9830d665.0.tgz","fileCount":18,"unpackedSize":99686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SQCRA9TVsSAnZWagAA1LMP/jl0L7QrfuvUzLbYgyQP\nKDNdhwU7WUaN+Hlci8vUzZpm0oJziGiXWc+7aVku6ujpRmS+n+/J3xTLrt2b\ndowQvWQJ5+jURU6QYY7IQeZjBNPyq/JjQ77QM7mVWGP4YQvWpGJNX5WX+32F\nUw84UMHkyaKtPEvMGoqqK0Eo5BcY+Es7AfgHIwgpM/J2HqoEPlSkcGVTQcKJ\nC/aSLc0AU7S+Leor3tbmT0TfnZLIFAkm2WkusA4FA8aMFxrylooz+axVAqh0\nYO2OD4Mm5aq/gGmSnjwXV2QVV0CW6Vfa+czVW7uFwS+2Og5tLMVSs+wZnzqM\nxBV/0T32cWKeEL6fNRLyFso4bSwU45zZUqIFB9cUQOVpLYYrtaPpXVmO5jou\nNsJRf35mf/IEzgSq5EghcitATFOKHGq0VlgYsaA4COyqC2ov9EaZ//ghU7oF\nqdr1WRCzrviOXDa/1r6a3GjY8lCNdrq34bJfc9kwqH8MNnW0EkRv+LmwHTmP\nTmHtlFKMbaP48YuHjQ9GC9NRgsYvsn95Yq3NWbxWqQEBn/BijtqutLxcQi0J\n9Qxg22twj2iPyjNoIOTQFeEOu8wn42s+4tITuoNA5z68Uf0stov9+iRMvUd4\nGowBxlWM+Y29UsGD67qiri9JzZ7xiskhi4dNccVZWNNGyOZgAq5IRixAlZPc\nmnfp\r\n=ImoY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtlgUdU0G4VZLd3715ap7IoXjkKP6qKySln3xp1Mj1xgIhAO7WpTtz9I8/QWzvMGcJJ54Dt7ICMEyQ3tK/m7pRaLt3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.9830d665.0_1631569040741_0.24944087829547823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.20e2081c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-ripple":"0.24.0-canary.20e2081c.0","@material/radio":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.864798678.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Lv1gfbpUzxQGfjU+yba6Vkrsl4WUXGbQo9Qk/hJYJSGo16whnjjkGAZquFYHHKlQc1iScjL8YbGh2vGt1a3OoA==","shasum":"c91d9f9b89827eb8ff1ded252a9b46f71ac68f1e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.20e2081c.0.tgz","fileCount":18,"unpackedSize":99694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+HCRA9TVsSAnZWagAAvywP/ieD1eSjCr8wLICejAxf\nl9hOMh1oCULEQ7ed/ksRjMVVYHCUFdZcg+wJy2Rp5QUxjgAu9tI9HAovYFuS\neu2yq68fbI7yJ7uusQBzUZt1XTHpl52ihko6jUTAyyuzAqojs9R7Eoqg/GLU\nOuFWKa9ZX9IicYZItJ7iKtZ/fG37uq4VSoKeVtCwg1JtO/FGxXsq3P4ZOSfy\nYRjeJAY8YH2ktAXshD9VUNpSo4Ws3p7RSyJODRzUwvJVlq1sraDtTholsMai\nxn4V7Zaj3NjZKmGJ3OjKGADu6UW3sJotEinDJEOvZXpcHRdfYd0uUZPZhpQ3\ncCdS1ZdlQtJF7JLURt/rMh+evuFECOqkMkVQcvEUISaBXKyr0pLZAeOh+Y0z\nqgjsHXS/4xvJgjfYeuKLoR6rtDWYafVnjUPif738RBgkIl2V5747v22Gk4Ti\nteJCtFbET9H2qwuR9YG74L9QiVkbTgJROMn0hwdeT70yX4ob0dVyFkvyOdS5\nIeJ+3lnfpcZWEC9SdohRZ+yrLYCdMb40N1cKKaRf8HC/N8c/iTHabttJRmOI\n/T0XJdASHv9c3JiomlKTn6q1HpO0ewTnKfdn4g/1TE5DChtxuOm3/ZHXlHqM\navlcu4Ap2/cBNGZjZL1GVHX+ZLi+4MPCEJyjK6bXHS59JL8TB8b+3bCiO31M\n/XVc\r\n=AuZw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPqXMQ7qcKggAHqxJ3BfsCg6ry/sjvBATSmLVSfkI5qwIgfa64Z/PV0T4+mfxR8UFRRfqAhHwcQCsjyO/W+2BXXGw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.20e2081c.0_1631575943489_0.8035721993015206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.583613a9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-ripple":"0.24.0-canary.583613a9.0","@material/radio":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.864798678.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZRAWK6MEq9D2xQlq1BipgAFr4yTZwQe/rWotrBHQhFeOps6ZO1SyS5Hm8XOrY0QpjPAHd2ArWeUA4RcpnkJ/4w==","shasum":"cb56611b767e824b5bc75deba0b66ce058a1f969","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.583613a9.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQCCRA9TVsSAnZWagAAYO0P/iW9qKIklEQ6JONaGfrh\nk5elIi0/OHO36/2wsXSVIK6QkFscscZVztMljznDPXGeqS7ybf/ZtuhFVVBp\nHqAw+7x1j3oWS7D6uJ/n60BWry5ZqyIir2kHHwG6vwsfBYDHxe+b+oxd9qQ1\n8L78tugoyblE/H3B2RVpj58dE/9PJejtv06+48WUEV/snCygkrsq/9U3LBAy\nGTMDWTx3JcOZX9QoCqF7vkbQ4I+ljlVrjAO1TSYq4ULbK0c0gm1pyE5/pIEi\nKpj3+1qcNph93oHXRiboKc7mlt+O/xiX91VGdAdSsMK/2AtCYSeAry/9Eiun\ngDlOzHyVII3kxCgdWxpz1m1i7wVKFyqKXOsKxDqL8iEyJj3YfHnmwaXEAE7P\n/R1DMDZdfgsYxArqLB/4khsvuaTv4MImiZqAlGXC5z3DCmvGSs5c3DoWuGYI\nyltS4J2/14SvRMXeacgy8ZpEx14D82+S4ebgje5cehsKiOBaAmuoZrwbeAd4\nUAGiFSsKJmajNvOpWSsIyrenoQd/bd8tYPAw0NjufL4NvCBfmsFbsk/ZZDkE\nECaEivm64sW818whCJ1IqTf6WdzeZsU1/Om8cgbAc/VbywgT8BQcKE+/+Dxk\nzUA4hylXcpnuiWTxrAkfCuz131RbB0DCNjM8oRT5bMYDmiwqTyaPTFqENIWH\nzItX\r\n=d+P0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnv3dUtVW/BLWGHoPnzYoe7H6ZkXwDvGMZR+a22wuamQIgXsTiUoiOCaZ9I/S77IRlYSeaViPfwkyfnBnD2eu2q2o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.583613a9.0_1631638530212_0.9705662075140653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-ripple":"0.24.0-canary.0e1bd56f.0","@material/radio":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.08398f880.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fpESBYMxUctLvJXMi4XDKXoq6IhyDGs8lcl+MVDHuFSkC3aJyTsLdNUp0PScy9Snp0kBK/qP4KsHTj0le/LcyA==","shasum":"0b602af9a06bb5f7c7337edbbedf91b5e8a82174","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.0e1bd56f.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNywCRA9TVsSAnZWagAA318P/2Q1R9RbvEie5hUcm91b\nOtbgricqPV6a40rW6uGoULLAqW7msWATbz5mrFmv/XnoLwmsKUliCFl1nmt+\n23QvcuGC9ZNYFmH5fQilGzrtDQEasCyp3pqvAN1ustYwXjQTLckOyrNhtSuT\ndOmFMG0ctrsG3NDuwTgoNaHq8snuaHylXGg/zT0OU8kByfmnNEPYoNoS51T4\n1vZBKOuuSKi6O9aQ4HZW512BooKOsRbzAoUE6cV+6vyNbJp2nzd9JHZeaDLj\nn7foEdOqTLzfxpgYoaTmzRNetQ7TrVylbWHtBVw8ZiVSIVFFOlbHMcm5vGar\n1MGVfQyEaCg2LqK/uOgjaf4eoo/fM5b/9WBZOB0zolMaDHrjqQS3Ij9oyQK1\nn0ZwSTgZcP8uBFk00/LkJ3i+5FOE+Ks7G0SmVaMhbGyqUi5AC9TR3W+yBggy\nUlEA1C6uanogFjqfvubW11hl8ewRsJ0KwQBZ53pyn6xB1/WdBwHNfnYBfFJv\niUk/oW8EjeFyoVzILJqzFiMpy8LiR04xiWJz83GnuIS1en4RggXjP4ksvnS3\n3NEQpfPdz22Vt2LibjQUAnINRNgFuGftmMdwFg37w4ak8Mwr07GlwAE7TfoQ\nHGgGcsbgbuhE6Lze0M+2aoFm7bBc7dvpHbrAr4mqUvkDTp7apLHnezkEfogS\n6fmH\r\n=W6CE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkifmOpRvhZoHMhDrLe8XH4nPBcD+Oj5FoJByDxMbG/AIgWUG7FGzpARl6U1zwCDnwK0UNUL1cXFS7yVOejZn6sKk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.0e1bd56f.0_1631640752032_0.18113135248956946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.7bb1818e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-ripple":"0.24.0-canary.7bb1818e.0","@material/radio":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.08398f880.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hYnnQIJEb7KPtG4kQDiJFiNxtVZQHGnWBjbRcX4ZkKsIL9GkqeQmbPH/4wFPMMelYR1+JDuueVSU7VRiMQBCag==","shasum":"265bf92588d7e4926f08d3abcf9f8cc4687c143d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.7bb1818e.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/2CRA9TVsSAnZWagAA8UcP/2K8HmMIZ7rzN7vAZY0d\nKGjRD3sbeIgDeMOXJDAEWIpb+BdK+6g5ZfAPLCcgnkO1a+S6b5YH5vy/u836\nV5NmeAsI051VMhYg16o6Up8As4777hIee2kJKwEPSWj/NhJFrMyw2QayGG+K\n1bEwAABkGB06YvkaWg32Uzn/f0cGRhLkXlhT0slGU5wTgysy5gJBv+APPdGk\nAKU6NhPnFz+iqW/r1QZ5O0+36DHIOz2QoP71dBYRGjLUzNKkdrVlIVIKf7dP\nNaEgul90l1+ZL6EXbk6Ox9khkmMNfOBzS5+5cC2Rc6EXYxbcvTUjhN27k7zo\nI8KIsSujLKmZ/xCpyTgQMxy852TbSbxaW4aKMjeGzwGpQXqwzL7BdZ70lpaY\nIT0OEgzgzYi70Fw1qcv3gxUsBBsfl0qHLjt4og0FEk+6p4LcUzJjVgiTnUFU\nkhptCGDHuREsBtkaNbeyVx5VNbuk2R0PQBKC2mDPeTMTT989iyHc73JW6/Vd\n1wBOKr/lVL+8+o7LX0pUe5jp4uxMD/3zNW1zUCovNu6w0qPONPHNnY8bI/Iw\nUzVgXDSL4lsye/GK6M+zTT5547mV3WMgP5YrljbTzLkR9dMv8uF0pVI+Bwqh\nYeAi+vMX3S2psMeU9BT5cyAX8WkHSwNzDGd+/OV0RjA43T0Wv+cXLoDexKgC\n+34q\r\n=vq5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQNNS0TwRNtasRAQPdYkemxC5LmB4GgtPbqwRKiPGF3wIhALEAInsRZaBeC60EFhA9cssACTboNoK8FTyO0BXcIwMD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.7bb1818e.0_1631666166743_0.2858789458314239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.b5e665a9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-ripple":"0.24.0-canary.b5e665a9.0","@material/radio":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vUSj2RosjWsrSOQbJ4o2RjyvcenZr7rwysacHpZhYjfzlSX8MUJPpu0C0vbs987VQoTOuz1k3dQHx+rSwkA66Q==","shasum":"a199ed9d4c1aeee2cdda6de171bd83d9b8dcc8c0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.b5e665a9.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfECRA9TVsSAnZWagAAQOQP/RCAvYHxTZkKt9ncxLMm\npNH/4e5ri9GVIIWbj6nktcUs3TLuohGdiLDy2Zzzy1SKKLX/GQq+6YlC6TI4\nuN6SWj1hXW9Xnyq7BE0erYQYf1AcpnJdGTVl9rblvY/kCiFF8oB7TNY6I0xs\nX0La57SxT7I8Lj5ImDHJxfsMEXOboNa1E0oc0d6Dnm1eEIR+arXAB86ycQcI\neoOGG89ofgAGWaFQMEgt6xOJEWGdFMs3JKPDrenUAeepUh4BUImx9cv4TcNZ\nBiz+GaxBgE75+CYnwuaqyRyouUZPBT+1z8ONg1K4TasVps3OxTWprFRffUal\ng/KqzLJn0qlUKKHWt6jbgEELazwMq3jv9FzIqJT1VwzkzBNp0XU89DAWFK9V\nt+OY0J/zXpxIvYDhYCWjOnMbp4dsmhFhXYGa2MtDB7GTzfe071clr5CVrN3+\nP8k9iE0o04+qTX1XHZvPkblPzO6cy07B/s+GM1gF1jNELHzv6TzgFNE+gr5v\nnpuF9tzHoLRHco7Z7ywxrNCSTVO80frVM0eVfYr5CL0lo6IX5unKQ79ju8xP\niJTXBZB7lGzxobZAqWagpchMCAbx+k648e739tjBygTaAFaokOcxNW4OowW4\nhb25F5x2Ko35Ojr+HNbj5CDfxAoLgjAVJyXuWJfuZjHpm7WLHEZWW30hDw6Z\nsA9t\r\n=jmJl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKtm6mWo4myuVOW4Iw44pyBTRqIWRKN2JieWPthwUamAIgCI9ykJ1WVpbfg2BjDfsyBvpNfROLtFV+5mUo9By9cq4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.b5e665a9.0_1631729604341_0.9373150286958092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.ab1e177c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-ripple":"0.24.0-canary.ab1e177c.0","@material/radio":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dr52gE+tW3H4E+vvNxc5E+1ho/ixQacAvUKtBhvZwGR+mdbgD4/OWsGqJUcUwN8eW2TlKSrEeLmlT3AU/fvMkQ==","shasum":"738a2f8b5fa0c1dcedda5a7e55439c95e2f2971a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.ab1e177c.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8vCRA9TVsSAnZWagAAIUgP+QAHJ5FC7cd2A32RiqRl\nEhXExjNufI9eZ5eInxZZY1pMR4Soa4sdgaVKe1iFsFhy7pNx2v5mQiiN+Fuk\n4IQu/nKy3PLCywGao7NLCfj5/ml2R+DjXIcwQFzyy8uQRcQMathk5MZ5jhee\nPH5Nxfo6wstvPjK9+ywgK08JrLIMDpPhMYju+Gh1eNWv2O7ts/NCEWhZgS+E\nwTdf6xQlxGidcKuQ2SPRyWqbeIBVdvbtJVhhxpMqH8sKMkjY18vm84gOVKUY\noz+5SkZLT+j/88upAKOlod7ksJwn7eih1r6DtosrzQjDMnmp2WWtmbA4H6DT\n9D8aQrTovbLm0OPkWlnJV7ItSz1uKcMvPRCl93llIQTy33TX4IxGrDE0rEEJ\nAE06hx/ONP9tbRF+N2ou5HUv7oZQ1ESsxL2c0tvf8X22IV7RmZptSjNFeQbz\nFflkVeB8bxX6+tQL3vNzl1pG7NlE4nQwIGWi1oAHTdO1f/atSVuHacCBBlVX\n0j0Hm+xJrJr3N7P8j172DcEgITVE5DAQDMdR5+FuF/jDsNS88mKkPkn30fep\nTRd1tST3YV2/pPBacjX2olKrXW60iityN5soSzAJh++Hkst4RmqKeYlRIIPS\nqHoaPn2njqvjxSZ3xcFElhuAKY0RioVF8eof40KXlCdUvmb7zUFLCDUDRw5H\neIEh\r\n=V7Se\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDW07zj6yGR7rVQaij/Gsb6l3+t6qzYVjO0sRP4QxBoNAiEAqIFIW+F452OU6ssqn8zM5JX9CV7weviMYcELuFyT66U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.ab1e177c.0_1631731503076_0.7971807553455015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.8dff8894.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-ripple":"0.24.0-canary.8dff8894.0","@material/radio":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A2ISeqq4OG/jpimP5BnO/ZzAIqBYk35183kLIFHsBoI8jJD6qxcUhghBaudmYVXMpNbGJDpyldp9I8RIhZgxVw==","shasum":"16443601dcbf533234f5dcc9b0413d4246b2a3f9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.8dff8894.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTACRA9TVsSAnZWagAAGwoP/AsvWO73doK85I9cI3Nb\nob4tkstZGt9OscoHmpFYhA9cDc7zOkDNAvWNzKGbZajUE+AeJ5i4pdjv0ruI\nKC8hkxEBDtwPvlfVMv7/yQwsLEhaMtYDdajfLaiXHe7r5UME+a6PjhOLDjFX\nAfsvaPbtq70Zxv31GXdPt2HbWImmzfeWGHFTOkBTH/8+dCx/ewlA8PCYLHD+\nqtdy/41NHExcy1urGdeb2K6np9u+kXEXgHTYIN9YPt5x57cUEImR1ctI3oYp\n+87kAGiAcNYcDUFCMPwo/0fr72qzjklrpEZaR+04/PFkqNWQtTeVYsvwJv4k\noy+G18L40mVjlueDtubANun01GRG1EW7JiOSfbGY+EmYBHqEnoDRyvU14wt5\nJwTWGAMgH50GnVO/Ia9jsjrpSzsF5ymwz4gnLFd5QC3hqNQebh9aOFkflpcV\nEPyHyl40D4zFqKIFBiQBjy2BqswRwDmUybmbGhN9Nww8lUDOPAomWH2G68mc\nbgkW1ow64yhvSAykRV+kcfSGDQ+DvC3H3l4OqvUerdojSktCqXsUPy28N1GT\nlxZD234IL2RMB0ytUiIlDshg7TZUEUJyQa5u2jQQuMmjn0U4IHhqEinTkDTy\n2ySp2/GWswDs0nLAtegnNY1jO6+QwYH3SlFyyY+WGhCvZDNZ9k1oo7KJc7l4\nBppa\r\n=tMOL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmr3ZMF4Pv3cwqdm1nuWXBX5lqq/a+9pxNNB2rIvSr2gIhAOOymcL1Nz54fENLqn0AeEyTQKSHPsFXSveX10Q7ZVEh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.8dff8894.0_1631732928164_0.05290450823948101"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.9cd7e927.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-ripple":"0.24.0-canary.9cd7e927.0","@material/radio":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oFgkaZLVOQPSesaG+DB2JCY7Js3acjKPch0GVLzQzHhLxs7GnsdGXgC0HapLpJjTkTguExq3eMCysCCxniepYA==","shasum":"55a97c9a70c97bbd5cc1b33792ee894a01d74fee","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.9cd7e927.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhbCRA9TVsSAnZWagAAB+sP/Rj3ih2r1IxDhM/UXQ/T\n0Dfcp/P590gaSqSzXkHd1+cDsDj/ICucHxy6AVM+tqBG1uC08KAzHP8tOM7Q\ngtFLagthjDmNFrRyF8YcLkE3gvY6V08AQoD62y3oQSZi0YYtOAAjxP9cSPAG\nziPs3AcKu+pwxrgmJPZ/V+z7lsTOFUIpufrxLSFJTO2d5NBq8lU0/yeSRVBJ\nMc3Lz/fr+7KC+An4EbaIZHeN1ssbgydHXVykZOec/HG5EULIPlfZemFBp1j9\n0rtT+nNHW52sGYPcNt5MD5uxV3/AG+IDDVzIBVCNQim8tNkjD5vEi85HJofH\no/90ir4+2C8YSBaRzbxRAiJPcCWRSyLKcvh7uBx6El8ApGJoM9tKvO7/hILM\nbATCZGJDfAiTSOdFpYC9RTTZekLL2Pi6TpKgmkPDSQuaSqv9OzMYKvhvm9CB\nasyCpYuX51NHj1rbPWhoR7DnIrcvxI1+LzkT0/jcFyXd1Q2wfDIPi0SBUe+w\notn7NsfWJ/pn0Srcxae5wRRLwLHrg3Hb5ghqko8RhxM5wkGdu+O5oNJTty2H\nUItIcknPAI1zWUxrTZPi75PBnbfYcdS+OWGZa2T6iWxzuSoxAYMvSZjaOc/d\nKdB76sx4M7etqCP4+2posOhTNqD3yAsZIr4fNXPaELh2+kPSXyHNXI1UCVpm\nSZG0\r\n=wYVc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhdJJXcWeQztkNK9bkXhp1l3AIsOwHnyPRfPZdjIW4RAiEAw0qylM53qjT5PDmO7VUXf83Zn3r6178XEI7bfQ2+Zhw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.9cd7e927.0_1631737947699_0.1856202634744224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.a7132082.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-ripple":"0.24.0-canary.a7132082.0","@material/radio":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.818f4ee93.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zji8LawA3WYElPWRUbfX33eSkE6JIcGy1H7gEeKgkyqkFWlqPUJRCiBzZ32B6Te0/VCVY+JwqS70z8OkGyplIA==","shasum":"cb2b94f9080a3a2bf1c83c8ea548a702a5dcda94","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.a7132082.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmTCRA9TVsSAnZWagAAZJYQAIGEVs3RtIsixcOssuCi\nxzQLGa7qdpDnlT1tmqiEZWfVOvdjq9fIcRJhftZOSSODY9uVSogOGgLwFE0W\nXQ2Wwh0TTt+BcrKhclD1rmv+qL/AM05VHRWiMHl8g768U2VZrgZJo4a9ORuF\n9SZcaV4Q3XgBq4Ox29zr2VmsexTRvtyJqhe6O0i8aYPS8j4Pxx/5NaSzrert\nqCpc1JIVaoDYn+MGQIdtWbKHkflGINuf9nAuADwIw3qvTPcp0EsJBtm6K/3v\nz6gicQ4dQ6klrgSRji67W3fhT7atKNG0ot9R/tddjs/mJY235fu+ZNMtFzXm\nG/xuIxxjtGU5zYON/q+UUpZ2O0EWzkX8RmeqHHQ+1dNp5IPKr6xM+gE3Jeyp\nEWI8dBx0ED2Po4GchTC7ieJfEe5AVQMkgsC2FHDA4IO+NaZcLKpEuA6/d+bH\n09frtdIbr3jci3aUQUoEEFIeXDFiECCEqLTg7qOdlU4yM6jFZZORtdGn5Hoi\n6K37nr0ZNXuE22TCqe8daGGA5S4GVkikP4kh+CpiX7U47mbJ8RbMEJvjnUjT\nWKu+o1oyTj86u3ncTgE8BCN+3/D58dNzhb50pLMQr1qPdkbpIoOGekJ6Sed2\n+T8DJsS0X6ScsNCJu7dEf+FhI8xjhJPSQMTegeu+Eav/ZbPg1+hntrfWlxn6\ntgzO\r\n=n2UR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQucYGriSJjRy3DHaamD4pP//U+0pKeROLU1q0vuYMVQIgVtmu06NAJAAbGbh6JkLCXHh1gYV7P4ljAPmEPbfqbSw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.a7132082.0_1631742355690_0.3342019544950079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.cd9110cd.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-ripple":"0.24.0-canary.cd9110cd.0","@material/radio":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.d4e16a6c4.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G4tTEQFgJoHSkmnp39LXGAmRoydwakFz6v8Dz2rCq6Q6ZaTEalWUetW0Bv3MrtP5f2gp6snVVKxqXuDFHTAYGA==","shasum":"e71c876bf94d5ae9ee076d545ce6d4defd6da8b0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.cd9110cd.0.tgz","fileCount":18,"unpackedSize":99706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LMCRA9TVsSAnZWagAAEgkP/Rs6gSsDx3ywU8Cbl/v/\nVg4sUmMfaQHSS3MApXEM8d3/3S+PAJbgHKtRfkJpn9iVsLPC901tmba3M/WF\njS0dpsCPN24FXvKEApUxEVSenJIey0MCifnVgQH9RQcDGjtfj1ew058QHMsd\nCKwt5vEVf9OEC6zpZn89N4SEmmHBFyurEPF+RCbbosVmd/mko9MGF2+xAaKM\n3aVKCVVfB6s2OQZqzzy8Z3imEUo/Fo64/QJfQatzCUgia81yox2iVj3Zxz9G\nODZWHo73E4LfS6PEVwoHeoHt+m6/FY0i1g/toKNHhqUI0xYrZBzTm4lbpxbu\nKm1928oHSdryum9IctMMA70b669DFBG6J0UtIzePPRLa6QDzMPM7QZdA57FZ\n5wpshsj3Mhaj0LaJOkOcWgnt9AaEvLuAPIBa7KXin5vSSMREGukENONDpYn5\n25J582CZuU2Udq0FjKTvz+cw330SGpydEe/j1YB8GmnesoYtnp7hPoqmkzxc\ntj24pIEM2+7ZfVdY4Huhy1s+g5nU/mdw0N5JoV7LVsTQlcCq0qGGGehexJ7R\n41M1Nzvp1OT2ZcqwWG9X8dpGRM99uu3u4mzEPszKvqf0wAa747hXF+ORr5FX\n9R7atNSI4tJXI/xC8MPbRcPinMsdoGr6cezKcOogmvdXrlA5jj+gUj7nfdp/\nd91G\r\n=VtBQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUMZxHwbJmPkNs2H5wIdANF/mPGVuXompSdmga61wmuAIhAP4lZX7NbRA/h9dBy+sTvSUYMnOxgiSsvDN/P2BHWtfd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.cd9110cd.0_1631814348703_0.6502726174333533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.1e5a9883.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-ripple":"0.24.0-canary.1e5a9883.0","@material/radio":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.d4e16a6c4.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-+5o7MmY9z9okv6eo9jg7iULYvYSkU0KF7TRIYl0ciDjECwC2EUFg0YZXbAVIIYwpTzH6160j6Zf+smJN68HQng==","shasum":"e5470ab93c90ab9e51cf8e75ad4253e63a9593de","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.1e5a9883.0.tgz","fileCount":18,"unpackedSize":99706,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxqM63bfxB3YsPI2QcW5NILUvH3w4Bqeuor4zasnm2dQIhAJj+2g5iCjbMdgNNxEJdCKgX3HbUsjiaAHE9tcrn3ZYa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.1e5a9883.0_1631911154718_0.6669891125480294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.32c830ee.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-ripple":"0.24.0-canary.32c830ee.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-T5AKaSOtMm0QPdrXKlrhIuJdo77q+AMLOW1MO7QiEXJ++5vjXgaNSb7IOoiZ0CFo+tv4wu3/iVM+xjUQZB0GSA==","shasum":"bb7c85025d5d01d3afdcfe5b380eee3993bc4a34","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.32c830ee.0.tgz","fileCount":18,"unpackedSize":99706,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8DAvY7UCwwtX+PGW0J9SGyDZQZkSOMIrwT2OmKRpsjAiEA+bdnfRTPy+D/lg9lOzgp548/1ipQ20EHYDAar0AlVoo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.32c830ee.0_1631920133752_0.5738320126303198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.1de87bb7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-ripple":"0.24.0-canary.1de87bb7.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-I23FzBLXYO+Qk/NUUkriRXQJi2uqG9t8nOJXmXB8nZTIk/7AL6snKapwnhO/Go7fK+obGV760eOWm1F5uWo1qA==","shasum":"5e205d4630b8b0fd0eaf80c77a6b2c8cf95bf8ef","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.1de87bb7.0.tgz","fileCount":18,"unpackedSize":99706,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXTebXZeg9F5TPp1UgqP0RIsUsyR+Lt2VWVYs1lxjrLAIgXc+uAO2nchsAU816xZkl9YwOB4UpjW9BgFnTJGgow/g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.1de87bb7.0_1631991136927_0.2991871732454341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-ripple":"0.24.0-canary.f2ea80c4.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-2qfUkPwxHXdtda/THImTxKVSK036SnYA0IepZ5P+Dly5DbwREJdy4ReCQsY3y8azjT7aTXqDqsuxwAafjI+pAg==","shasum":"959af10bfc063fa32a37bd7e097aab631fd98ee5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.f2ea80c4.0.tgz","fileCount":18,"unpackedSize":99706,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9ZVec82cCxPWSiQwKcSLLSGHLZr/u9BOyPaFoSlXBCgIhAJi5SiCEUsLsm4ZvWS0vsSwZCPQlDHGXP2wcFa5UvqFu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.f2ea80c4.0_1632160502403_0.5940869849914074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.569d739f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-ripple":"0.24.0-canary.569d739f.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-AtA4l5ZxImOUgVGFn/7+zMowccfXKzqWJkIrdxjORvzwHXkwPwwLbk+fKQbfOD1fH9dQnZy779rrTP/1mcgP2g==","shasum":"865d9a07fc2b2d54b1eac3dc070b069d31aa4d22","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.569d739f.0.tgz","fileCount":18,"unpackedSize":99706,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDauIaVNo1zyaPZCSFyhe17rlPw9yI00RrZGHiqcGUlMgIgQW1RB96UM+kb1NqW5sIF0C37CnpmhiDPCMbxZJBsspM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.569d739f.0_1632173038488_0.7382817752956614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-radio","version":"0.24.0-canary.5a434a50.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-ripple":"0.24.0-canary.5a434a50.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-OGIj2CgxE1iJqud/2BV69kAJB6MKWQTQvoCNnORi0/UO5YlZGTMYfyXNcrut92eEJO53BBA7tbyQc+F/yVtIuQ==","shasum":"eb071a482c6a26c8c43bfd61dcc6cf3f5f3feee0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.24.0-canary.5a434a50.0.tgz","fileCount":18,"unpackedSize":99698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxGR3b59J78H+feHlemYVD49JiVonFvc/QBZv1eW41EQIgIsAMb/Id83RxKMu3pxOsOpoOP2FYZF0u4RrVuzXPYkQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.24.0-canary.5a434a50.0_1632189653572_0.8809943340481714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-radio","version":"0.25.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.0","@material/mwc-ripple":"^0.25.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"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-radio@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-4BbMFCEhXBdN2zDvhL22nzquaBvdgi866IM26oQdVF3aFEPLopxeCCiysdoIETDfvo9kfXp0ZzlwkmHssYpPGQ==","shasum":"6a07cdd2a0a7f1a2114ddd0dbc7ff4f2f8aac580","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.25.0.tgz","fileCount":21,"unpackedSize":113476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsn/9uIsn+iRhlYGDH8rOv+bDCnRsw8xO/djLsqOlCQQIgATGTu/KU8dhwnJY9hZv7IZK11nbaJzdwzXAgBTksyAE="}]},"_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-radio_0.25.0_1632192787400_0.6901728270199576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-qplmgIyh9wCHP/HDmUZjn+vrm8U0v5noDDV0g3TpmhgNawzNZUfwswf/D/z2cOuG0U8S5X397RECJKsbXOJXXw==","shasum":"499e21b61b62bb63bd01eb6f368a7bb7532a4ec0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.b1c1ab52.0.tgz","fileCount":18,"unpackedSize":99698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpDnqa4LEnvPrLkqtV5UQ6zsSUtLvsXNlA4GL/bpxN3AIgAukS90UCLDfN/oTsz2vUCeApkNOL6utBHCo7UCQK1Mg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.b1c1ab52.0_1632193938085_0.09219931961971839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-radio","version":"0.25.1","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/mwc-ripple":"^0.25.1","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-xx307iuUKpyYvWOl2SmbJsufGLE9fhGK0R0iZ4ZCc8t6NrBy9WilGzzZVeyn1KRGG9AYWwe4mfLXnrSiqnQYpg==","shasum":"e79f0d95921924b98e4a60bf156c9eb2fdddbdf9","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.25.1.tgz","fileCount":21,"unpackedSize":113476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGYQ3Fe3u5lnWEjX4lrr87oHrvcxtHrtckgL2UNZjh+AiB+1aV9TunnJgunAZ12ruAIChgnM4bHM7LBMtQ1YR/LzQ=="}]},"_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-radio_0.25.1_1632193964053_0.6867410646803545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.ae060177.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-ripple":"0.26.0-canary.ae060177.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-rthMxpxP1DA1QU7aa1rBq3vo9Tz4VZzs5Ss8kS/5sSL5/W+3+5cZ8TAhNSQVGbe/VayeXuJznqUQuN2S8k8qhA==","shasum":"741207fe0233e3f897e8dbd7206bffb6bd416ccc","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.ae060177.0.tgz","fileCount":18,"unpackedSize":99698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUGQKehk3sfTNIBQN8cwKTrygmf39HgK8CXpasl9YKDAIgWHEEB4HINj1cAmMxlUOAtF1Gr+/CRDej6RdK7/+a+ls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.ae060177.0_1632235096040_0.7768610869477157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-fNvuN+HitEs5ft+QI1Nd6NVEwb+Za5MAyPcNwR7cJ/enGKraK+li8BEuK5BW0RAI7SJGfRiYGZSxXmMWXY6Czg==","shasum":"9a5eac073427689ba5910fdcf36f01e18c14aa89","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.b6fe2a12.0.tgz","fileCount":18,"unpackedSize":99698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgLqbXlKwEzsgSmJNwaQQlzjR+eJRkaHYLHLEy+DtnsgIhAM4oHdv+bfC817cO7uWphVkPRDpPScFFoHhS2bub5fQ+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.b6fe2a12.0_1632341785341_0.2340180502392315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.07e91417.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-ripple":"0.26.0-canary.07e91417.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-LoiVa3pPAvYyV1BlbNMqDKnfUW+JztCkzPbj6EIW36Zl2hJ5EBMIwDoZIMvT3vp7qfNJijMeafooVQG+BZgGzg==","shasum":"49ab3bf678930118b878905752759aa75264988b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.07e91417.0.tgz","fileCount":18,"unpackedSize":99698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJnwPK9ABX5diQ/tbG3X6uAjN1J6uPZW3M8wRjavrlQAIhAI7NipkweCnFiDzVhDL322VfYWgOsryejjanf3daA6cF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.07e91417.0_1632344755449_0.3126304855436495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.e2203ffa.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","@material/radio":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.65125b3a6.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-nwJywU22oMSei+Zu9F936CNy8NElfzA+9NeRsr7R4/7fT/Ks79gO0zMfN1lxwbxVIcvl4p5RwaTNqJpG/B/9wA==","shasum":"77049f3bc956498ee46643415b4f852bffc4539e","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.e2203ffa.0.tgz","fileCount":18,"unpackedSize":99698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtXdzuXctEoJDBqOxheJmI6mHIpBySeu8JO6G2pzT/GwIgU00QjEhJb3dPRjkkLMFFbTootePqN8bfLdu6HFXM3jY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.e2203ffa.0_1632421665064_0.6829290807748378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.4abe237e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-ripple":"0.26.0-canary.4abe237e.0","@material/radio":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.c79aa0cdd.0","lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-NawdKyHWmcx5HyB/Nx8HNHCL4tue84MUv0YCormJUok6huLyKwmUBj4H56dkgohWOwfd0UTXuP2w4hqfTrQaVQ==","shasum":"b8e8498257464a8cd66f65c531f620c6c58c4c1b","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.4abe237e.0.tgz","fileCount":18,"unpackedSize":99698,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQCYdOkF7p+e86siirfX3uMhrGLPZIjTZdVdNMZwWXRAiEAkf3Jr+IB8vKzvL2xdbwZNf4RyQRpxhx5mQBFpaOweK4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.4abe237e.0_1632504675945_0.4053893169145326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.6278ee5d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","@material/radio":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-6xMtkO76N4LooPGjL77TYJkbm0MFWQu7HwGrmOP4Al+bp9cKIljoAF9b2wgN5BctENxAMo4KSS4SZPHC1ipMUw==","shasum":"26f68b06974d4de45a815e65bd0b63f5598eb973","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.6278ee5d.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk1vQF3DVnG22zCha6sCb4r+irhcPNpQdhNitRknNUFwIhAJb/2Jujl+sYO32aOpAheEAliGJW902s6o/PCO7p+bQ1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.6278ee5d.0_1632767489830_0.5436794023658253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","@material/radio":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-S9FtcyzCuTwqxhnvsAwqsyJJeXrWD96boO9WqIbybeFBQ4p5duClqvveBfE4LagcwjNEb1GF32z75lWsStsCqg==","shasum":"9ae1231180460ed4b4c063419bd67dd1f67285ae","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.3a5d5f34.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjuv7Qhwn/eX1r5rMYRjMQVx1wqow9o4075w+wnhzL1QIgIud1e66Hxq5ep111RJNYu2xR+R9Cp982pD7CK+vBP+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-radio_0.26.0-canary.3a5d5f34.0_1632782498636_0.05617008744169194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.143ed3c8.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","@material/radio":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-BYJmatDcOAGAQjENRXC9sLqT5pGPMWvRg0T8PIZVslUahPd20u9e1hBCAnP25ikep1Rn+Kb5dtXSy33UEv641A==","shasum":"b4c92fd1bbeac04d44482d5b252d3e6fe275cf04","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.143ed3c8.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7It61pAhioNDJg9faXOYk2Hq19t+ET50zBKGkRKyx6AiBmj9K+4z8m5gEhF2wtMnzr3fWeBqZh6yiEHO11iYLz2w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.143ed3c8.0_1632880258091_0.9113413225178126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.e5923d68.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-ripple":"0.26.0-canary.e5923d68.0","@material/radio":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-OecMEHMc5656gUU9XbU+J9hqPPY3TuTdHIRmqJ7tNDjB1Zb5SIO2IlpPjdEn65KtkFgf0Q8CbypwAJWqx8uywA==","shasum":"caa8e05e5c294ddf3d333db82dbd642db209a4fd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.e5923d68.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVIalyPCGp0QUB8Vo+/CbGlDI6niWc2+ahYlJjtfdetAiBJUMprnXnz+yvehm7fhTd0EPnsNGc/M9OVABfwTY8K4Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.e5923d68.0_1632960357506_0.44810611437172354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.d8ed5109.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","@material/radio":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Dab0aAJYE/1nsfLp5+YxaLB/JHqedYx7KP1XA3Z6pLpWoSUBJCjguRohZ8x2MX7EOqE4Wj2iuf9/lTbRdVszbg==","shasum":"d66a5e308972a4490571a9db187f8cc4de4bc63f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.d8ed5109.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBymsWwOX2GLocRORU9IgntTUYhq2St3O/IYSeCAe+4GAiBGYGQ9jmsV5KYO0Mek4RR9yIB/duIPDsoHs5H4ATNkjg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.d8ed5109.0_1633044841116_0.360973474658576"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","@material/radio":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Ejud6JD1iqRKyVeGOuSGrBx9jty13eodvBeuKfSxjt4X5YSuXHoYLvgibNsazSRRtRVx2sWqtKfK8oLP7IXHRQ==","shasum":"0e9d258e82fdbceef525ae87d504812417175cf3","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.0efb9c2c.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6mmnbZ9OpRolQQODukIzzLisWT3KiRpYGoh8kTEbzXAIhAO4+TKweC1GwKqLKMSPtO54oMGHBssvNaZFmhiSj3nqP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.0efb9c2c.0_1633140504128_0.9959809301067517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","@material/radio":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-c14a7SQQUJg3YVd7idHSCVDctAiR3Tcvk6dKSXt4Zes/D0WwhP6uiEobTjpVKZ36tkWEfY/nBRAacR7LuQs1iw==","shasum":"0d033b3f61022dc83e662a7a386ac6c028484bc5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.1c9adcb3.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAG3a7cLsrH5EwGqznDTejJcTUpOG/yTB+bVGeiOHra4AiBt47X8nqLwL2PhDq/bGQbozEBcGHdTuR+fB4BqxZpvaA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.1c9adcb3.0_1633368821357_0.5122452425331587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.dfc00d60.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","@material/radio":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-6B15rXGv9kWDJKNi3163NMMod/Pmg613gMM6307lypX+HwkPAoi6KhewSjG70ShKShAhsLcge9F4dXIXQ61yVw==","shasum":"d8a0fa2bdbb6d8299984551b3998d716d94ed963","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.dfc00d60.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1hVw7k3ms40v2uIrtIgrOvPcxIe/iYjJ0Q+ffNfHWCAiBwkBHfkF2nDTFkFXJW317CCEKAA+RbhyLXmWQ+RtdXZg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.dfc00d60.0_1633741042038_0.46887288485074863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.c3aa844c.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","@material/radio":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-lni5bwDms7WiLBQFtyZ90LFmiaicmEfRw4aHyykIqv+gY8B7KgoGSwn8z4sdy8XuBWnlIb6oflpIDWzf09ga4Q==","shasum":"6975b72d2e00392ea923ba4b16442e24c14e22ed","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.c3aa844c.0.tgz","fileCount":18,"unpackedSize":99730,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICF0gzg+4/LFs7yZmYnrVeoVpiz+6dlHf4NSiKWa52N+AiEA4tLYIJfXpSpcFBBOXKgK3AamRaGID8v8OPM6jz0sFTw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.c3aa844c.0_1633994068437_0.4678044089206588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-radio","version":"0.25.2","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/mwc-ripple":"^0.25.2","@material/radio":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-V3WojFgGoYYBKhlXm34Gacr4yGW+sA5uJO7JiZA9bbET1TLuRjhE5Z9EuKS/JmGkHr3o5t/0lPvENR3pBGpvVQ==","shasum":"de37074aa1b5e8815870bfae9a8b0c01fac125df","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.25.2.tgz","fileCount":18,"unpackedSize":99678,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTWOFgwZzRKTFXvTwByrVAjjfSZeDt63VUAzeo+ztgaAIhAOfOJpmiHtCpR0vM6zkSYzC8b6NyAum/l2d4s+6AltyO"}]},"_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-radio_0.25.2_1633994313292_0.09185679980268935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.406d6fe1.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","@material/radio":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-paTGTii0ReoUtU1HBfdUpziAzLAuIs+Mke2vGSfQvDGfEwziEPa2Ja0qAEMdiM8aP7rjiplSSj6QBuE/zpQ+lQ==","shasum":"539f69f3fe6224e6eb98acf177629b7e19d5f444","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.406d6fe1.0.tgz","fileCount":18,"unpackedSize":99706,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa29qNyGbejyQymgx66/PM4zfZXcx8i5kV3u1I350uRgIgR+M2i8xDHKOLKTEPvq90OGUOtUPPemhdi/y2nTVoL6A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.406d6fe1.0_1634158776065_0.8893514099199107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.ca0a674f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","@material/radio":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-f5YgFPin8HKlIoa6ue/N08IZDockX2GrO1HF4+lpQSurzt6zri2loQgCqyB4OvMUivH23Brrhzx9Dwx01er1KA==","shasum":"f387e3d17ef7afccca49ac7efb56a8c41697345d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.ca0a674f.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR18leoIZWOEYAyhK4QY1lFfOHzxvBSKMOKkpLnf2rLgIgRzS0cPXlN0zaxOK+bTJqK6KI+d6iP1tLgUaZOiGIlGY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.ca0a674f.0_1634593026533_0.8166898133140399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.eefcf660.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-ripple":"0.26.0-canary.eefcf660.0","@material/radio":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Ywmhpb7sFPUHY2zDpbBOfEppl6Z/EcHwuFrJOIOACfs/2/DXby+WLITuHU4ye93ksc3bC3BjBNRcJME/oPkirg==","shasum":"1b9c86e0fbfe5fcc0ca897f1ece744dedd7cb17c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.eefcf660.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdfdx7sT3+xtWiZrxwjTPO6Uf7ewA/Wre5rtBB5HaSTAiAC4nrPQpQKHG3BbIIAypfhL0RAGw2TVwiAdO0ijs9N8Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.eefcf660.0_1634765024380_0.7619143465930269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.d21acc8f.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","@material/radio":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-UYo59HUHUp3mR+2P2U+auzsqkar5sfoUNDlRAC4z8F7k4QB3UebODw/xJgi80Tz0vYnE7SLuQ0P46ldeuIXQlg==","shasum":"1c1d73aedd82d57ef9277ff4ff2ca3c0f1b494b5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.d21acc8f.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBahn5K9SH+bK+4zhKtgVzLcLxTPVFiJz4R7cvw1Lbx2AiEAzoyLgM9314UzPpljqoFfUQlmx7KBD3p8cV4u8KH5KmY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.d21acc8f.0_1634769157563_0.7043069548147343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-radio","version":"0.25.3","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/mwc-ripple":"^0.25.3","@material/radio":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-SXpVDrsQnz7+2w/kfBxcOJ4P+uJ0RxBd9mCLE7wVyN53gDLkNHqA0npdl2PNpRaaMavVrt27L8wWo5QIT+7zWA==","shasum":"f57aeadba2fc2fcfa2a7eec9ee4484249031e661","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.25.3.tgz","fileCount":18,"unpackedSize":99644,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEuMIH4LzIdP57enHoTLstQJURaB82zuFZMjzoGmW//oAiB9bjkYi2ILMAGIw3LpBVd5ppgf2O459Njw5JkZYAbN+g=="}]},"_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-radio_0.25.3_1634838944409_0.506266532486312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.60449b7b.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-ripple":"0.26.0-canary.60449b7b.0","@material/radio":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-KEYIJscTDmUrioVJKNIT0oEzWbvN7qSykM7Ra0VE9iJDyaYF60yNts5wbdJhD/B/CG+FzSqAt2JYgFkUpswH9w==","shasum":"82029e6139795c6e7b3c21bcb13b1b7d8c8594ed","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.60449b7b.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV+EwpPx7l2XQS+uklAE9WQDJBmf9HZXXdyq1IxheXMgIhAJC+n0up4EKI17xquWCzA0LwYUqKQDdkrdyRQqOtMqGZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.60449b7b.0_1634840255535_0.44813699577799726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.0d8084ed.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","@material/radio":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-eBUl8i0HR3tku8XHnZsJZsHJfiIiUFyDHC9ZIzLgSxyChLlfDFAQfoQ1JWcKyKy0wD/sUbVdK2ttOEw9XfD9Xg==","shasum":"20539d9d144926093cf6b98d0c5d586b40775236","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.0d8084ed.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtr1yTV4z5Wm+GPzIgTKeWKbrSCl+7fAf6tWucvL08NAiEAgJQH4v84E6Lx7HWWzExveMg9xnUYdi84J6HSHGibbyc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.0d8084ed.0_1635443102713_0.2985335980065269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.232327ee.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-ripple":"0.26.0-canary.232327ee.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-jLCUQNjCMXgMptnlbrt/DqBwwX4ZMUvrax6edw2OpcQXdpaiRdI5chwMeIE03hqGjFM9SbPV3R/X6hIWkmF6AQ==","shasum":"81f0c8f67bcf9cf0f569513b7eba03ead7bbbf8d","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.232327ee.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFfbhgxQsK8mcEhnbpMeUlXAIwY85rIvidLhRIXV7QAwAiEAmi1x8clBo+2au8orBXfDJnUFviJYuJN43/VNgH+upj4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.232327ee.0_1635797755123_0.49882630086858804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.0a492ae8.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-FlvCRa9xXCFzwX8UdPxFvTl5eVshgfyqDROq03wqEyzUpHUT6HCEPTPGoIn9mAHTHMuaBS4bbijJewTOTwIKYQ==","shasum":"db1341f22f4dd041536293c67b6d6422a0a7373a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.0a492ae8.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYzYTMFhKvnh1iU5Fff/oXaAx/ooZuT0Z7bV+Zq8Y/UAiEAlrC8LowroVZdRw/6QkvXUnGoWAej33KBgT+9nTFh77E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.0a492ae8.0_1635847232325_0.1466579022011023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.0aa18745.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-ripple":"0.26.0-canary.0aa18745.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-v5KhYTlLVhs+IeadD6GyLoKNzSrTPcXjQxD4yYnzc+jxTSpkSw26e+FDicg/4voZATmigV6rTPRghjMnhFNvhg==","shasum":"7ac74b04a1e6372508d8c4282630b39ccb5afb07","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.0aa18745.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbixxgHZkrNlzk3+MX2hu8BJ38qj8OZY1V79i4wXviJQIgN1dST99EqAQhnGUbEWctTCA7cBlE20PMSxIQ0TtJbP0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.0aa18745.0_1635876478942_0.14063008572322055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.f3e28323.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-ripple":"0.26.0-canary.f3e28323.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-KxN3FuU9sOMeYxKKRY6D83LG7kmSJHqU+/K5qAqnr4e+YfT/Xn1YC6JF6GbhANOfZriG2lG3nD2jDXi0s8GlUw==","shasum":"4111f26d99088425943946c30bda156cce1504fd","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.f3e28323.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGE+zuijCMHmMSLkWq5sT6iBrMvpPY1mp8JiY/hShLKSAiBaVd9m9cHRaxYOFTHDY6tXTv0eyr5e+vnm74QmIh46dQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.f3e28323.0_1635879581804_0.7174587548506204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.27e05c5d.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-muQFm9obAaYH6ECOjqJ+SPbcuOl1hjRez9p++IvKvbjLCr29aJFb70d+e582WsgGf9ZSaXAwdGK4Z7lC3p4P5g==","shasum":"4f774e53111285bf9a68ef510cde70c031ece93f","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.27e05c5d.0.tgz","fileCount":18,"unpackedSize":99696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2Fe5LWGmRwnQKPMNgOGbcfQg4LTO+kdJSdgWs6ESMFAiBn+GUgPFbGAD7jHvi40xpl1nQPXOHb0cCVnOFREa2QOA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.27e05c5d.0_1635965106888_0.9317898445878594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.b9e44af7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-x9Bd7Z7WXK11IvCWk+Y1PFl7gByM6YLBY+a/+CUUlPcYg8OUGetiEx2+L3tYBNmxleMF9aGv2hO0A7JOMxO2aw==","shasum":"32b1ec4ddf3affa7a8fb33caf912cad3ee46bda4","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.b9e44af7.0.tgz","fileCount":18,"unpackedSize":99710,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHJAK9W4sNhLt22f8RvKlbXpzL6ngt1IqY9sBJfbo8fAiBLFyIYT9lA3ZYRX3h1ssb4eHfAd3Yqv4wD8kfMWTopqg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.b9e44af7.0_1635966250330_0.9017693493037455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.448f6cb9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-kl5wTJqyLLIbg+jSIN50b3c0qTCkz2KW8LTPvbLMovV8GyqAQrNlQR2wrNuf7h/arbxg/FpnQtfMfmxxbUfEzg==","shasum":"01e205f0376203f9e741eff2789e1fde2c85e253","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.448f6cb9.0.tgz","fileCount":18,"unpackedSize":99710,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbqMzVeR9cuHeya9e2zEzSyX5KzR9n2JKVHdlXPcyiiAiAvfEHfJ9wJcYxctBGuC0MgutxzEBJ7KnroNcJaA3GC7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.448f6cb9.0_1636049282544_0.15586633588757692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.8067ce28.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-ripple":"0.26.0-canary.8067ce28.0","@material/radio":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Kf9moLJB5ZVvY2q1cXMSySYloJs+wL+trbJUh4W4IrOFiH2bYJ/Dr5YjrqyXtf/5tzamSi5dW2oAWOBDIrGbmw==","shasum":"929b93f462472926d61b31b83f21c2f8137bd1a5","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.8067ce28.0.tgz","fileCount":18,"unpackedSize":99710,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCe8Grt2YyADI6wSuQ2Kt1G5w4s71HzoOXDONYNL5O/DQIgJZL9KxJD5bljUCEeP6yDlNs5dtpK6DmahS6Oe+0UhQ4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-radio_0.26.0-canary.8067ce28.0_1636064554815_0.44009885825638095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.345c2bb9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","@material/radio":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-NezRIc/DpG8xX8/yqdUZ3ph1QQxVEsWV0kh1lImcPsDFv668ApkTQBihXq8I6pjCOznDLtsWW1BVeyZGqgDANQ==","shasum":"5a88f87b9c5437b7bb0e555c3f43daf9125015d0","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.345c2bb9.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP39CRA9TVsSAnZWagAAj2cQAIExFE2270CMzv+eMELp\nmfHQSLYcm4PPSVDMXWLKY/uwG/toEBotYLhRuwrR8HmuoJqOvsNalHvdppl9\nwqW1PdEDy4E/vdDtjgHMWw06nt/p6+g5yhK1sJUCBGPxarQCLEyz2H90LAUc\n7zH+vloHvlkyQB1xahVSa2eq+7dmPrMh48O/haseKLn8wYrUBBYf8GTrrRA6\ncPB58jQEjBSpxV/BffYdimMAKpn6vrJT/jsiLe1lWNMshJFvTismtQDRJO1A\ngbYAHO/gafvZX+ZITPpNzHfQhnzbnZJ6d8glRuunzf2rff5JK2a1pd8cXwVQ\nI9oZPXxArRB54UQMiK7BMN4xL1KYBGILdwbee2mXkYMOt80mtccNXCuBRLsc\ngOdQuxzcsdxZ4QdTERqG/8lR7XZkyvmyH3Wv9O7Vdc8o3h4aRPW33P2/sX5Y\ncTj+gdcTJyHRST/qSNUT/bYLUfcMw+9a77gZEaD3DYHdhme4FWIShQFgk00u\neh7hzsWqSP4n//ftmS8HxGKYI6kixo/1HDRV4o5gVl60ExlPFIAHsvCtctwJ\nxrgVM4thanj0swjdT3AHzX+BYQaHw0OTJ6WW+0mQlqJAKcfSPe3V46VX9ERp\nWwzRH3P2WtupvKESV7jtnSssB37soVWh2Aco1wuqDb955wJV8BF2NEDkxWpf\ngsfb\r\n=PMaY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNhgpVOeVKcRrOUivTEPfImPqDuAB3xzOEN//ZbxhhJAiADNB/0x3Z6CEumeJjLzyVp8TpoG70X73OBG+X2CJTtjQ=="}]},"_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-radio_0.26.0-canary.345c2bb9.0_1638465021558_0.9456835474953575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.0547aeeb.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","@material/radio":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-+osA9NsUe1s9JKGDS2KXakXTiuyPrsdjhnaoGYLFhhsngrZdqzXRFSjIhflusBsEaftKmlilufxQMKd5LVbFNw==","shasum":"c55b5633ab70575397b4e7380890ea707c3f4721","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.0547aeeb.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwFCRA9TVsSAnZWagAAHgQP/2ViZdUtBbUNLCNzvat/\npD6QBqgkALmgsLNWKIbpzSijtrqdZGdcEPmXMJDrkeDtqGKNEYnqejiZ3luj\n6yWv/i52PL2S0MJ+eoOrraEFnKHBPO0ljKFvCPiu58h+7cLWU8YnK/pWnpiJ\nuy4NGBqWmkYtEXbspOQ3ZD85d6xHp+TJoE9F6UvNBLYxzQW6/M8kca6acqfF\nO0593EttLc3Cm54ZsWpoeEAlrFazFCbCK5IbtSlWjhFipH394R7U69gah1bC\naM7yNY6NUYl2GP7SFSzk8+Hx2ugM95opOrc59Y6YyjhF2DSyFyRvPR0A5TkR\nWygtTBgZ+hENvFlO47sNOFFfre44FNMpI2nezNRIq6QvVj+Jy5t3LPt6J+Sk\nSY3xd+9430OP8VQsH4uwWkh0TjSv4CzQu8kYf8zhtIFwwhT+HuyZj0CtGGNq\nvYiSFOabG4gXvDKrEGYAKPI0NafaiyXNPUk2YJVaLXlEBLmJNKdvPCrTTdLa\nieSvvWnKNBL7hSGnStCbgRKHkzciPtKKZWVeDflMxA8X9785H6s1iOS4+ktZ\nBIV5lahAtcFdUKnS63W/lyCA7DcJzfN/ycn1gc8q5U6Sg9QGL1vep+2EzSx5\nAaBm1Qv4qXv/JASFqp4FgtdbDtE+EnZkgCBNznhoHMTA81r/5xYjPScSNbo7\npEFp\r\n=RKUy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAnuaEtXCdTBCmazlaDNcliE1sb2uA0mJuBr9SZMrNCAiEA5ahuIio+Y6NFexcLPtO1+qnukMKt1Ep/aaf0KgA4yac="}]},"_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-radio_0.26.0-canary.0547aeeb.0_1638808581445_0.5864720365762894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.3b2452cc.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","@material/radio":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ZLTKYCrtF/R9eM/8Acqyc8Fl6nNrNtB/+THtXr3wBs+YSYHVML1gHvBWv8S5gnFbS2ZN3oyZgGIxtawPcfuARg==","shasum":"f7cd98b84543dce367baddca94084e4493fb0994","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.3b2452cc.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhfCRA9TVsSAnZWagAA0+EQAKNEjHoSTPFxRhrbEWTw\nSdmFAHp8Y5Vy74o/dGpq4bUXFf3D8EG+dvXmehnhRqrp9xOlMyAIqkBpVzJW\n4xgFll8dHGVjZsqnRadXliUCL8RrF2CX9BuUlnjp0TS5/5cqx/yDUPxPZsbK\nVGl7M9RILTQ9ZMVxaDCbM9T1pDgoYEdNBXd1JqH9r7z29IdWjELLOBqEN2eW\n4mSaqq6qCeux1XAjfY6vRWflNKGg0G5tKHGqf7pXRBwp7SpkPtKowRUGnbIR\nSPQjC+jalBaA+FKVop0Q8qkU8vwyMzQIeQ9PvD04dVFHqOQzHfO1JWkjF/+D\n47myhWY+1hbg+kYiM/avEMOKA0JgDCFo7L1BCnXWMApOEePE1Ya3AjmbcLsd\nUjI8XgFZ6/1iFLj5Tba8zrMhmJjqZyU9fGFpgIx9zrHGPR14keHZAfYgue+r\nyrScngIuZwLwlbj0Vv4KQUyDg+1JbSgij5ziCAKE3t5dPl6gHCEuR3CFuxOC\n6aK4I1elLlHWsbEI6VGPkhY315jMV84C75EZl1qNu46189j2WjF6UhmHhFbh\nyFiPwxjCn5M/pYAfwL7Kz/jhqMHm0MFXMkgS4TxnTXg+8SjWZpyx4ejCvafc\nMTL+EEgNmn1wOmkOZyhDIa+/w3SFsOLcDlDm6gh8AG5QLtsWWzcNVpGk6cae\nDkAw\r\n=VWoq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2l9FSmZb+JEAM/WncHvQviimO128X3KgZdA6CdvnjCgIgJvuQOmfuj+jtEhraixr0k6NLiODqsG7Y7VvAMP4jkyc="}]},"_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-radio_0.26.0-canary.3b2452cc.0_1639008351754_0.91143518768525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","@material/radio":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-MIjvKsfFcyJ2xa9xGrVxzPN1Teo+tPU3tyzGODNH5gOiiZuTf0l6yBw3DbBJBTgX782JTKbP3v1aTH8rdXI/7Q==","shasum":"532d34d27692bbe171dfb67d20b23952620c5b29","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VdCRA9TVsSAnZWagAAtAQP/jEMRd89dwObrDcV3ILM\nmJop4Wq9H+RZO2duTtYrhxLmSWJTpOXGMWNh41a9NpS5v/YHO//EkxW2lkgp\nJhKhh5l6v2vp4HAOQQsw1MAsaHDyEP/imYOepP2OKc7o3lvh86shzOIN7Q9n\noasBv7D0Z1B6nxcTXiD4CyYrYOjBCqnp0cidWsSgwWvoQYbWgmaEaNBSn7nO\nY7kYBV3PTmKjqK4y7kgUJiG2jnleVYDfGtFtrc7jAFyyAmyyQajfw4wi8FdN\ndvJgSJxjUNEtLcHKn9DMgeLpwj0fKZTLVJRIwnkuojzkbjtYFpDUvxMYnGQe\nd963leBh2pl2OgNCa7uyRUMEW4s7F6Vp8qTffTovqpow4B/z8kMSJcCHYonp\n2DnOB7/RYhM6HuYREMTcUfST6zcGNiA3w+l/MYZ3u/xrmN8XdYnjeizF49ii\nrXSSyJjaNVh/59s0caywGkIdnz7I1RCUFdpxjfF5Z/6ufksy/9Qc2AaK61EZ\ngTczMlLLZOBB7124w/UBWPYOPMWlPFv5Mx1uz4+wZ5XlvlVeoO3NQcsz7ZS2\n0k5T4jE+ckTyyqhOgK2jFQ7GoMz6wUHlADRT4pOwTYl9jySxaWzokI6gni4M\nnVRW+2dRA8M007khxZwVA6znojLq/n3YFIZ4R1uqS6cdxi4clNlPM6lhsh2H\nSema\r\n=qeSu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwzND+orfu/gH38aDrIz0Sr+M3+rxhHu4wCfxkWoc+oAiBMzRb8xhtzwfseY/z5Wrix8Yzlq7V3N6eB6J43jKesUA=="}]},"_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-radio_0.26.0-canary.cf7ba5a9.0_1639163229352_0.47739025768990984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","@material/radio":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-RMc758BBKUlc0GK/cBG2kPVOkp6SJOanqIWFN059ancHPpDiwymx66vycNW2h6iVwn9YBM1hdBNpTqZJwwV4tQ==","shasum":"ba88a7db61865dfad93e5ac689f132096e55d110","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.e1bcf14e.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3d8CRA9TVsSAnZWagAAgO8P/0UC6w5I8TQu9mEyZPkH\nTmLvoCczK1p+4SasyXcWYq9IP3DSFwwGog5MXpETMkQcEE0gkuT/gfXNBxg+\nc42U8PYGupWXzrn/U7y3b+DUtobbRfiJjIDwwbK0UwOyim5NZt+iUgMNULu/\nWiD2kxfOrG82jWQo3qYRHyRMXm8c9LZX8CPtt7VKPYqgP84yKNMagG1u+ceG\nvwnwxs95ar306TP/7eKOpsAPOM+thB5WDfY5FQ+AOqBp0foeF/hdpo1lQMza\nf1Az/cf/gshrBj2lVfoztX1XnnHtBsl/pAxyWJSUn8DWXWJ8/0DbAVQz+StM\nZUNgd1jPhZveGOuWiuWG/juYcOR9eywbp9AgLVVpThCRu63VHHlSKs4U2WGi\nBlH2UQQJ9FCwmrOiXD3pWF0KEJ41hhN2y06yfi+NupsB5rlOxQIaOo5uVYfZ\nbt9riRjNuC9nwUn4bwCxw3HXWzoi4mxZiyMWoG/565A0hW/2QjJwxejTtdve\nbdJ14V/uYLwUwVGymQx8rfsz9CZs4veVoU2DyqYQj2HJ2iIh+DlNxQKXzJZA\n9/dUGroqMVKKPauywsEYfYKzPY1CqYm67QassBM2b7ALDTj5WqA1W4fBMry8\nZ8berc2GQvSAygzKvj1nLTlrOCsoFvPjcSDW19dcCINTxo8vq+f4BhnfYeiG\nkHuE\r\n=lD6Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZdUhO96KnI1MWZpSWeM0iiMpWExwSh7/wZKUSf7KZcAiEA+2TrhN8GLyfc6ntT/KlYf73ouDMKzyUDd8Y5bx5RfPM="}]},"_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-radio_0.26.0-canary.e1bcf14e.0_1640724348197_0.2280547640931212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.b9d35b69.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","@material/radio":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-VxF3WRZ94Ax81jvl+CsnIpiPcJVFV41XCuuXK4bfJaSZpUWUgovlDvzWlmV8Tddx+35D9zIr35KcfxRC7ubPtA==","shasum":"dee922640ddf3efb0a6045a3e0582e63062756d8","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.b9d35b69.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMJCRA9TVsSAnZWagAAZ7EP/0GU/bkhzMdgoyT+VWS6\nxSakAWURClhwDYghOdNyNVNE8DCOpjwwq8EYhYCFPCpOBrpw3EF77pgS5xmZ\nEukmtDl9xccpTTTlaF2toJnEkPw6I6QkSn/FELu/je7NrESxJ3VoZMXUl4ij\niyWFXfy5eXJ2e1Yr0jpnulVevfMRmnqA6MBUmDBvHGePzAYQXVWZ/QEAUze6\npKuqdmnoaG5x6CKfKBTVcthIwc6s8Ga/TQB3zD6lU44wFlQ/+XiYrJbAj3iA\nwydkROABWrDsq+gSx6pdshLARVrghmvrFOUEx+LBJE2Lj9mkDXG7Dpk7ag9t\nk4UcujgxIrOHcZgnT6JNDNc8APA4wpcrJcht1QqueUcm9yghVAgCGBk1f1Cq\nb9FZ0RBQE+qYhw2D/0WfAQwp9hZQ8YGmLhzuoDEY6SNvS1I5PLegx1cXUDy5\nGSKfGywIAGjN88kPke1BSQtq/Bcr57g01Zh645ETxVkRDZJv7vv07F0WrDPO\nv+NemDv0TX92wjSOaCcj7sdy6a1uaGEN+MFC/q6cDQpkFS6lnPQM8yo9VJNN\nJfPNpZOq0xPtNMeWOv6i+eeoRn1nXK8keYCt5A3OmbWsjRNHCmYPhje42o7J\nUhsu5JLpqfSUgRrdzuzawDKrjdKmMKYmoGMqx4viCqE5sN82c0903mtXQ9W6\nce2A\r\n=gDop\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDuTcw3fD2bMfoehaiKb1YZr6hejpXpzPhspgfz5GSSwIgJ3FKwb5c6KWdVzatTkBVH2k47eBn5eatUpFOaQCfy3w="}]},"_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-radio_0.26.0-canary.b9d35b69.0_1641407241485_0.21949843856351814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.2afff08e.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-ripple":"0.26.0-canary.2afff08e.0","@material/radio":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-7A0IPyEZ+kJiUsL8ZU6NjQQrnsyXunQS15NsnoMrKK/wNqkWg7uryXlx6421bGUyMHMBHPJsb7cQd3uoDCUTmQ==","shasum":"60b22f577e1b3bed2178be420dcf6212fec496a6","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.2afff08e.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vJCRA9TVsSAnZWagAAi1kP/0obcrsX5nJXZJ8Xk1Bi\nBVUWdqQcPbr1Hs/uJmGmYLyPaGpPKiTFvjux35ixk2WKR1MZgzrJAhFOYS5h\nuxmi4Tnrj4PorTqURlKMQZizz4Bhm8CaquBDfi+i3vzobZjMdYlbYCa56YvX\nWuxZZsdH4l0ItayghL5MLFu8hi3xueaaQlPpMiY5frMNUkBSeQQU2mJMyDvO\nVkBgHE90bK0BylaTHo6nb3Bu/l8XoiVTNo0lEKsRsbq8Wr9PG0tVKl8aSCDP\n9ZzKBmZjGRWNzWU1IploR3zI1am6pVyvZsz+g3eTaIM8cOd8zUFR233dJ+kz\ng/ZipAZ6WuvZ+RpsuSV6RHBeZDpNjtBnRMBaguTGsty7btE5e1ZtTBUWwFGU\nFeqOlA2vjzY2YOsrM/pE9iezJA/E1puFvMbz88toZiW80qG8t7YkNLLXlN7O\nF+I0QaYPlyn7lfu2RWBk56Djpm+GrKGN3Xc53n+BsXVVBWf21T0JD5uAOuBB\nWd+ISdQ7rt4sqk/Rr693C6V9R1sxneLv08K9qtS+ClFzpQG6pKBUVPqQ1KpJ\nR/hcobBL2ojd/DhMjre0WSb6JJuR2AbfG92+dO8RyUZoUnfGY3wFjXHMOdly\nhlZnIN8lg7IAL0wuBqRlTd4Z0b/sYc6zoCrvEle+6p+oBDMTvXKNRuodtB7f\nxmJq\r\n=M+Af\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxyvyJD9CWl38MW9Nght6KjTUyuS0BCBIRAj/0k4PgdAiBhL8SbeyT2zOrH77ZmeabKZaamgurdBqFNU2HM6JdKHA=="}]},"_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-radio_0.26.0-canary.2afff08e.0_1641507785778_0.478607747011621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.893fc857.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-ripple":"0.26.0-canary.893fc857.0","@material/radio":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-CbwhQ8NOzAOl2qFfr/02eqWQAZyWMOTQdt+UhoTAOcXNMTL5pM/M7r0KyLtvag5lf5GEBFh/OM5FKTRMyDJ5Sw==","shasum":"65ef328c81212b0df1c4b2933b1d509b0ab63198","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.893fc857.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxICRA9TVsSAnZWagAADi0P/1cKdO3ut1NXD/AiKzcC\nNyorcwiOVyqjvlIrRrS3Iaeuuuz4I5y+7Vhl69qSTEqENkcBJUVYVNV3Bkf+\naF3wvTOxkGYMeCPmV7EGgV40dY5G/Tmgz2mKy7YhkADVOYr40O4UzYjEACfz\nRAoH4sdFSIWxXI0/JiNbyHejoJTrhoOzE2ILzd0QGKP5wBfsInwfHpwq+UA1\nkRMHJsMYayPrBzf9sBWIKRZ+QZ9js1jXLpIBmUhzSUOmhyUCZXqg0TpgFxyf\noDaSaadDfQH71VC0DY0+Fj1LmoE0iTJZCVNDIv+eHnpm8PhjCQrRhVM+T57a\noq/Mn2U8hlavzPq3l9s2tkFY/hFPjcJzjhfG7D9oBUohzTiYc09Bu+qZ1yGJ\n+sQn5bq72R2Tzn6X1PfzxOxaX8szdUIgHOfG2ZNH2ASytECrJZafnMb2jEgl\nCVlFhCwvDmlYEb6a7GI/MdtRjs5IgqSJkWsAjgO5vUwdeNSCBE4Il+yrA/1Q\n2CkZOzagaxKDlx5ODmKbW2yg8YjwhMTtzKz3c36kaaW66agCvON3wcjeOW0F\n8Mnv8czyjCO24kTCUkuo1dSGPdEHU04xWgj6x1/xJR/mqojjxc+jROMCebMl\nwiWSlFM8nb3XyNbro/DP3UbDqQk2twrmEODpxVIjWNqb4xPVHyYQmXOxD83U\nz52z\r\n=qoOj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVlBH0iPMEjuIBULZpcDhO5iYL9oOsoSUqAgb28hTS/AiAjhKL5IXav5b5UeiBt3lhCuXg0RSV/DUMIlMDzFQs92Q=="}]},"_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-radio_0.26.0-canary.893fc857.0_1641581639998_0.7591706143637467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.69ba13b7.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","@material/radio":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-/CjGD4NFm0BwdPcqTL70BbvDONyiu8C9yLnGelsskWvaEa2fYvnNEw+2QHPLy1deNCoX7SJRFhamNw9EdIkRxw==","shasum":"722fd577520f6eb94edd967af196b2bab2a7f37a","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.69ba13b7.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+BCRA9TVsSAnZWagAAK0oQAJdYXnixMmc1waErdjvd\n6eiESjzcCkrJzVCwaimz4oO1A6H4fkIbgC9usj00zkFa7o+gTL7X609mm0Yk\nh5uiIJ54mOimv3ZynRIeN6SowKv70kbL9hhnQf97Qb/0DTlYZ6Q39H+La5FN\nDByKU27J1ERm+kUTic5Af3Gbscmbo24yUzKapW6Jh9vKp/UzpHsFi1XI6M/9\n0ppP7l20foTfBWB+3ZQholK2OhFNmYHo7M9/xit4rwrvuu2Y8hv82ecnBN2A\nOQ1EisQ8W4Pd8TK991DEJnPRbfweARJPOHMpG+vLRtbGEVeTn++xTXpQmnSX\nuGerGMMrauYwjab8mlCiAfbqH/AbIUKFvEuCtdJOox5UaN4xTLhUZezgJTYj\nzAdZWsqoGPtmIOxz6lHaNQBJnTClbeGo/Z79QfTP1FioXiAgnK8TCaltLqwj\nHMT/2IFCGPb91h+VPwwmElf3Doqe/blorxRa4fsOezUW5sUpRlHn1h1SPiOC\nVUSgUCosIB3dxLjXAhJWB/qVHw/TxyL9ezfB9maddjYCGjZyM4Dqt52CQODC\nhU1Q/Tn+XHmaXCC2V7Zjo08NIsouZzRG+QG0NxDI0syjHR1E9s1bw2Uo76Yt\nmx9uxNriNM2i6uDRD/+j3XVhAwGwAmcD0Z7vi8M7fkroNP/C0IyB5O3XlRo8\ntkE+\r\n=Yug+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzGGMyzv547e/Kw0+lCFRrATg1Ye3uUZ1oImES8iY5ZwIgCjcp/0JBcBhUJbKuSPKtigJEMd3YaK04IgGgS+wBfoM="}]},"_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-radio_0.26.0-canary.69ba13b7.0_1642631040671_0.5643343408500128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-radio","version":"0.26.0-canary.0af8ade5.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","@material/radio":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-sWR2y0YMpDJfPYbsHCvuXV4BskswZCV5WCHXZoki5SmAYiD+Uq06hLXPp7Zs8RUyVjkqDp2hb4EI+bMtXAC/yw==","shasum":"8ab97582d9553e7274be21b9c8a5a5a1a448f216","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0-canary.0af8ade5.0.tgz","fileCount":18,"unpackedSize":101842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZedCRA9TVsSAnZWagAAcFsP/0EVJ3GWDYkpLvg+O3Rt\nepQvEpR2AN6OlXsIHkkR3hrm5pGsdcPc5Ypyds/QiB5cUyHq1MeF6ZuUdoz4\nhjNJTJK8vnWotbIRNKEsJ7H5hZMVgrOLbLTn4TJvGrBoYaMOkrftLUjFyHNY\nnh83ka22yKoKxYWKi1eZJkQerZZ5U/tUvg92cysmMhj4qHDiX3yImm7eEoHk\n6YB1G4VNzn4bYlJHpktcodX7SjalkhPKrV1gmhRc29DfECGKDOBBBWvtlPl5\nobP/rIdJ4XTGv5zlc1pXAtwpOY7IEh/NRieON1Zmqe8vWYx/t3NE54tG1OEK\n0EsEIS6yFT+Q4fE7umSKGiP9CmgzV/7kuGlQhjfpY0hvw4DUWtdr+U32XSkJ\ntiFKTTs2xPQJSQTz4EhjXHDi7KDlZHOTg8/IKHmXDpgKgp/3RrDbsk5qfrgX\nmKuKSSje0yShizQHZRtmAUXXAptJev4v2axjEUbSRg33YRUsRnLTkKJtwr8V\nSa1C4hy18XO/xn/g3UeeEN5r2OdqCUAn9TmiR81xa5rBRtOXDXtL+ItQaEM4\nxc1dyEDlkFqOFU6Z1Dm56LuAZ7AUPSZATDy1axSBw36qFC05pTBwNizTAo7A\nUAa+yGxiTKpdKMUKxrE7dSCt8uGtKDaJ6SJFnQMS/4SceesZZvsMEntfj9uI\nJJAY\r\n=ZMSN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2yD3VlzVVEPHrwS5YIS3bpgofByByY3d9bWjMZqQYkwIgdGGQgU09tfWaqRo1ZZo7QIKHKvrvbPitEHC8MbfQsZM="}]},"_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-radio_0.26.0-canary.0af8ade5.0_1644271517206_0.662310203718236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-radio","version":"0.26.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/mwc-ripple":"^0.26.0","@material/radio":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-IhgU59yZ9L1KPHDfFcmEXfz+zNMBbrtHk5ZRm9c3mU54nOlKNQ0J8yLApaoG1q9qjTxexEsAdhxuY1CBmXqWvQ==","shasum":"9af40ab38ce10c14c0a978dfe2ced8164c4ad062","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.0.tgz","fileCount":18,"unpackedSize":102014,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIAHJdxGqoICXt/Zhnec93fyjn1mWgJLNpsK4fJVJyghbAh8xP59VQFtdfxavZrL4Rmft3McBrw5Drec9YJ9q+rUP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSAQ//SVyqx/YEz47avwQjW5y05iKPaMBcXfnKDhLt3yOP/6h1YHiS\r\nnKoDRmi0BtqYfmeQfnjd0cFiKp289iyjl2eJDes86G7Ru2NqAVLK9Rv6Wi/P\r\nGFQyKn0mvDOKpvqRZeamo3cAVFvr1d1aJ2XKelbiI3ul6qoCn8IwpaBKoBp6\r\nNQCxKYgNSxvK/sgtemnRjDUBUR1W9D9oSRUjZ2hHKl7bWpcAh8fZFuKS6z4V\r\neEY1+vWJdeJr+3syvI2A2SCjGkBaviimjltyuGmFzNNDXhpG3tTDO/ZWL/gP\r\n7XoK6P2QDh7kfTw+UUmJwpKFJ9GgfiO9bptlzALHuk1QygrKSmVbnbCF+dgb\r\n+Q0d1mdjJJrE9N84+5iN1mLB3VabL4NiMmWMthEla66k8E5SQU+kzArYsgfv\r\n8ugtcMt79vOtGfP/ZZfiNKjTQY7ve+GIKhZW/wfqzmQyV1U69DMv3ZnIfWhO\r\nXDdkJ5tJa2D+xyTv5QTbNFaj5559C/Qmzru4CaM0zTjqXyw+c6pv4vImtqZZ\r\nFPvIpLnm0Fn7gEqNyBPn7qcqOur2NK546cNsTpCRishG5xqAc4QwtnktKhzd\r\n9waiF39WYPaHFdWA0vqX65CXOvfkC2T+jh78feWpa1hXEZdB1x2f6xt0QQ1K\r\n5xClTgY6DS2MFlZnIELrUh2hI57CFwnvtmQ=\r\n=nu/T\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-radio_0.26.0_1651599033566_0.11613353247082259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-radio","version":"0.26.1","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/mwc-ripple":"^0.26.1","@material/radio":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-KWEcwVKbZS0wIfxOk8AqFNZocnP2f3JjnO/m2y6RWBUUrSgIlxavfz3J5MiwDC0JjYI1jUmheivcKrlZRNxnSA==","shasum":"3d77a85b6ce643415163997e016e5d801a35a76c","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.26.1.tgz","fileCount":18,"unpackedSize":102212,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS4h5DqlszSp0rMC/Ey4W6qQBnwPBSrWj5sDj87wnFmAIhAPu74RNpdn4RNpYQ3DUak8EnD2PaUiqNlepNn/uu/RCj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolBg/8Cf3NTKwjFnCTD1TWQwleK9oNp2IprZWYY54tqFOXvPMw2KrU\r\n0EAbTu1kcESoX5bIJkZMh9IDI8q/Z/hC5zFG6ZxfGbadE2sj54UpVprhJQjK\r\nWsWqzEnNB6syHkuWxHyY9sAo23WUTZ+x48RWk9qQN30OlPiSdTeliLMemmSO\r\nIhZIpegmsd6CAXxkUmYLXgJhqyhe1tb+9yeyrP46DZUlrVANkq2+0t9zXjsy\r\nJdUQaufyAlpZVOUrMoEPGGgJPXKsy8CcjlKQ6vvCnMuUs10hbffBcSRA6P1j\r\nEQSmgulfxVNOWLTVI8xFq1Zb1yIl3kmUhSC0v6S3pOfOn5I8C25eu1nck90R\r\nyLAcrQblNYJD3tIMJjgV96M7EEF83jt2K+fJLAx8M6WyI70gfCYYFwOrDkS3\r\nSuOTWzY+eimP69wPfBpP/yjlvTLXgeSxxbTB+bErsKpChIj8Oj+ewwF6REcL\r\nsx0MLFBNq5aWED3ijoFcBbrpVVkJ1LHKjOyU7EuojbIV/GN0++2mk/PDNb4m\r\nxHOl9FC7tS6DIPKeTOan+LAmbScoETcsXMPJkY/TDYZbIK54/ddki7+vKZ1I\r\nUlxkrRrPmHp4oM6705LKygxSD9Y8tDt+f2hC+Tn25FuYm6uoRfEJU8g8MfNd\r\nbCeLPDvmp5FkZgkIF7qT0JhvSvixD4FKqQ0=\r\n=sV/m\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-radio_0.26.1_1652128311978_0.27878423317380685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-radio","version":"0.27.0","description":"Material Design radio web component","keywords":["material design","web components","radio"],"main":"mwc-radio.js","module":"mwc-radio.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/radio"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/mwc-ripple":"^0.27.0","@material/radio":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/ripple":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-radio.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-radio@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-+rSO9a373BgyMgQOM0Z8vVkuieobBylPJ8qpltytM+yGPj8+n+MtwRZyg+ry3WwEjYYDMP6GxZPHwLgWs6lMpQ==","shasum":"f05b69706626590725e5338705485ac44ea60875","tarball":"https://registry.npmjs.org/@material/mwc-radio/-/mwc-radio-0.27.0.tgz","fileCount":18,"unpackedSize":102212,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1thW44y+OZtq/SwJVpSr0rBpbLhh/UMrrOPk5m9ApsAIgMr0QNmN563CL2vWle6Aj8geSeLllf6c8fmW4Wo/OkjI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlHhAAodfNvsWjSF9Sa5LNcoX9hn7qNOL8ant2V4fn6H/Jw8x1FwXF\r\nqYz9RNjpudFOs1a3qNc6ew0h/YtH2/8SxEqBxX9W8L6tXZhBYapB/RQ6K0Cc\r\n/FnwsXTng3ZexP7a5/1fbgkYaaMsEC/Igoy5niQot0k0+9NsF+0mR8Z5ClUR\r\n/BraM2SqmwjZH7Xvg3HBtOSWYnw1bKGckcc7wOziKhmsrrvT3asB8E9jYdyk\r\nsk4TrEaddueeDlBhvykzv5DdDIDe9mBUi9rkBjsH4trp+LMlt4vbx1tFxuKp\r\nv+3uXtOgriMazB//JkPwShV4EleNmb+nolxcMIdQD5gsg29zB0NGXppqiM90\r\nheKXKdViCyW66jfN7jRQf6boPYGXRpM7jFK0oTDfd7ssEGab8nIcCvEpFi3+\r\ng/NeHSTZ+26BTMX9lpsQzQQFZoP0bj3jGbJPhYg2HEf7NlsiDRbLUk/tXxkJ\r\nmFw1ijyfGMTpZ1rbzeyoamxKEdDtjmSCKJduIPMEH7YG52FMIPPIyTlQlS7k\r\n/66cqaNU7PPVs8HCYYXFj/W5RE6Cg5m3t9ohCQH3Y33EGk/wB3+nWkHCy1mL\r\nlraQO39hePiC5Dtr2JUWClTEaUDzw05OtsbuTH755Goqm+D7vNuVNzRQ8SEK\r\nXXTm+lwCeIv4SjQ/qcAfvcDPnU06dU/AGmQ=\r\n=jl6/\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-radio_0.27.0_1660331528752_0.014848970591363697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2018-05-08T00:04:28.763Z","0.1.0":"2018-05-08T00:04:28.928Z","modified":"2024-04-04T18:54:33.498Z","0.1.1":"2018-05-09T21:05:00.383Z","0.1.2":"2018-06-14T22:50:58.758Z","0.2.0":"2018-09-14T00:36:32.032Z","0.2.1":"2018-09-22T01:00:21.563Z","0.3.0":"2018-10-04T23:25:58.544Z","0.3.1":"2018-10-08T19:20:45.426Z","0.3.2":"2018-11-17T02:06:00.794Z","0.3.3":"2018-12-04T00:58:07.769Z","0.3.4":"2018-12-13T20:39:19.840Z","0.3.5":"2019-01-11T22:16:47.333Z","0.3.6":"2019-02-05T20:18:38.062Z","0.4.0":"2019-03-12T00:01:27.316Z","0.5.0":"2019-03-26T22:38:51.540Z","0.6.0":"2019-06-05T22:20:26.159Z","0.7.0":"2019-08-27T21:23:48.521Z","0.7.1":"2019-08-28T02:54:28.307Z","0.8.0":"2019-09-04T00:04:57.868Z","0.9.0":"2019-09-27T01:36:15.657Z","0.9.1":"2019-09-30T21:05:13.520Z","0.10.0":"2019-10-11T23:28:20.178Z","0.11.0":"2019-11-26T21:49:33.845Z","0.11.1":"2019-11-27T00:26:43.895Z","0.12.0":"2019-12-17T23:48:01.195Z","0.13.0":"2020-02-04T04:46:40.685Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:27.856Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:03.589Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:31.429Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:57.688Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:15.410Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:52.241Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:04.323Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:59.767Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:54.762Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:23.141Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:45.206Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:37.405Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:22.373Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:26.751Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:25.947Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:43.838Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:56.153Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:29.472Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:04.457Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:38.473Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:57.589Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:06.258Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:01.878Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:22.610Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:30.252Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:53.937Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:01.172Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:50.973Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:31.431Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:23.894Z","0.14.0":"2020-03-19T21:28:41.938Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:03.092Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:20.372Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:02.801Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:37.215Z","0.14.1":"2020-03-23T17:57:33.315Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:02.359Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:47.331Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:15.674Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:09.321Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:10.345Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:35.456Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:27.176Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:37.485Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:24.889Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:02.106Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:00.848Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:52.384Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:11.664Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:17.746Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:49.717Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:59.970Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:13.455Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:33.205Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:42.265Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:48.042Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:40.827Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:17.917Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:00.363Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:47.062Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:49.871Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:28.107Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:10.157Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:11.173Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:38.049Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:25.749Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:19.484Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:27.186Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:24.615Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:14.553Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:35.279Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:26.509Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:22.040Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:28.536Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:46.419Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:04.395Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:50.633Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:00.383Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:05.808Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:09.764Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:08.899Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:25.232Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:24.736Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:47.955Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:54.783Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:49.078Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:52.278Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:08.730Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:21.442Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:35.969Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:30.435Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:56.622Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:12.133Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:57.296Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:43.212Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:15.736Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:47.792Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:40.466Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:04.386Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:10.849Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:16.667Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:54.757Z","0.15.0":"2020-05-05T22:36:13.245Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:36.522Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:51.739Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:21.855Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:40.725Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:52.682Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:13.201Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:47.950Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:27.758Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:56.818Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:24.250Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:06.223Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:24.454Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:36.156Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:47.179Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:20.193Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:28.908Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:14.082Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:59.009Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:40.084Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:49.194Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:40.680Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:57.775Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:25.347Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:32.186Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:51.690Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:23.651Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:00.563Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:33.022Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:25.341Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:48.621Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:57.240Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:55.909Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:16.673Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:29.133Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:22.693Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:20.898Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:39.763Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:08.053Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:45.079Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:18.858Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:46.795Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:56.268Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:37.636Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:59.195Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:24.372Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:46.222Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:58.522Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:09.724Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:34.115Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:02.733Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:16.168Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:50.332Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:14.228Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:50.961Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:55.272Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:48.575Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:48.895Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:59.199Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:44.327Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:52.813Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:51.008Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:50.552Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:09.822Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:18.144Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:31.266Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:01.927Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:21.684Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:28.889Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:04.560Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:23.973Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:33.291Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:55.410Z","0.16.1":"2020-06-30T21:14:54.570Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:15.100Z","0.17.0":"2020-07-01T19:44:23.078Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:33.717Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:35.318Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:40.211Z","0.17.2":"2020-07-02T05:58:19.288Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:29.717Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:47.290Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:21.950Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:35.618Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:49.423Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:54.931Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:37.550Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:29.092Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:30.734Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:14.504Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:56.765Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:43.144Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:07.839Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:34.957Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:05.994Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:53.079Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:12.549Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:41.707Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:00.421Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:43:56.262Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:41.899Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:03.553Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:03.067Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:49.670Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:50.181Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:08.236Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:35.346Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:39.305Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:00.791Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:18.405Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:28.395Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:40.108Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:59.342Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:22.435Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:35.865Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:44.164Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:45.945Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:38.461Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:01.069Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:20.888Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:22.650Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:45.310Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:03.177Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:41.407Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:17.550Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:35.882Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:52.014Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:18.125Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:52.975Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:44.374Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:47.644Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:34.448Z","0.18.0":"2020-08-03T21:24:26.312Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:02.283Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:15.106Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:57.759Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:09.094Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:34.760Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:31.987Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:54.687Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:35.641Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:55.833Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:03.869Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:36.749Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:34.149Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:08.568Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:53.131Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:18.013Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:37.456Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:40.828Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:30.090Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:48.858Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:13.823Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:42.400Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:46.246Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:10.643Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:51.143Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:18.466Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:13.788Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:03.223Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:09.825Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:08.901Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:37.360Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:15.608Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:45.768Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:23.088Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:03.667Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:18.360Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:32.876Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:22.440Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:18.043Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:23.515Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:31.317Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:48.282Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:15.861Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:27.741Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:47.166Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:46.490Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:03.349Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:48.098Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:16.897Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:24.794Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:29.091Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:22.622Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:43.298Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:25.247Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:23.273Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:31.495Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:39.447Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:29.259Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:51.639Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:00.306Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:30.826Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:08.748Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:44.718Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:50.639Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:43.295Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:54.309Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:18.567Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:37.927Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:33.350Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:41.230Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:35.877Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:25.769Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:22.678Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:17.544Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:35.431Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:07.334Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:18.174Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:33.977Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:56.245Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:41.427Z","0.19.0":"2020-10-07T22:33:23.668Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:53.102Z","0.19.1":"2020-10-08T23:05:54.185Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:20.853Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:29.860Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:25.440Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:30.466Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:02.316Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:40.503Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:38.234Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:24.561Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:13.810Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:24.638Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:03.375Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:13.568Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:22.155Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:10.674Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:49.292Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:47.915Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:05.347Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:59.884Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:55.068Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:05.309Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:08.323Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:18.652Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:13.389Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:56.316Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:37.687Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:20.398Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:26.131Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:04.208Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:23.790Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:52.465Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:22.392Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:08.784Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:49.477Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:35.317Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:58.186Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:22.278Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:31.637Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:29.011Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:25.047Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:01.573Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:38.248Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:23.121Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:29.107Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:58.894Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:12.853Z","0.20.0":"2020-12-03T22:28:53.371Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:01.762Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:14.966Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:08.508Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:59.877Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:06.097Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:20.847Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:58.090Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:50.564Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:47.582Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:29.997Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:20.211Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:16.608Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:39.701Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:10.753Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:24.269Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:16.351Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:43.031Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:31.626Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:25.718Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:35.508Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:43.635Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:34.166Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:28.040Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:59.683Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:36.285Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:50.702Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:47.737Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:44.364Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:41.843Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:41.304Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:41.027Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:57.557Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:03.412Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:25.772Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:42.000Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:19.680Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:25.292Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:38.648Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:20.559Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:52.555Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:50.959Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:37.315Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:59.479Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:17.815Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:28.282Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:49.809Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:18.033Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:19.944Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:09.030Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:17.418Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:33.757Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:04.243Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:14.646Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:20.462Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:43.230Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:06.245Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:15.946Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:29.695Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:31.440Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:14.273Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:25.730Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:21.158Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:38.693Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:56.912Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:04.547Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:20.639Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:52.319Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:35.258Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:20.062Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:44.691Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:51.322Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:43.903Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:25.517Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:38.730Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:11.879Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:59.303Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:27.373Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:49.235Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:53.478Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:37.502Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:05.950Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:58.268Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:09.698Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:39.384Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:35.140Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:05.990Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:48.246Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:15.994Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:00.295Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:29.718Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:18.667Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:09.418Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:33.253Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:05.623Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:41.673Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:38.113Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:57.430Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:29.751Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:43.856Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:18.966Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:22.421Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:36.242Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:15.213Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:17.825Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:33.927Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:02.810Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:05.913Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:13.279Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:46.793Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:48.677Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:40.971Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:22.108Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:04.286Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:28.778Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:08.193Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:33.435Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:14.200Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:11.996Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:47.275Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:20.156Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:39.522Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:29.126Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:38.383Z","0.21.0":"2021-04-30T23:58:07.955Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:26.819Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:23.678Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:47.562Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:49.742Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:07.207Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:38.010Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:28.651Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:10.103Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:02.483Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:29.881Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:23.514Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:42.111Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:45.333Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:28.230Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:17.255Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:50.263Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:44.873Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:32.645Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:34.294Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:22.159Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:33.818Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:02.504Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:37.563Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:12.614Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:50.111Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:42.174Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:07.438Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:24.997Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:11.918Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:12.321Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:36.692Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:00.506Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:27.944Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:33.534Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:36.831Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:36.261Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:14.729Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:30.706Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:31.679Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:18.699Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:25.889Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:29.949Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:18.147Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:18.716Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:39.732Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:20.014Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:50.597Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:13.129Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:29.261Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:06.177Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:53.148Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:49.002Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:16.097Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:21.196Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:12.633Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:26.090Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:00.315Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:13.591Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:31.679Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:35.645Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:25.028Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:42.888Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:57.115Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:58.189Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:47.960Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:15.535Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:50.944Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:47.925Z","0.22.0":"2021-07-14T22:38:55.617Z","0.22.1":"2021-07-14T22:52:53.015Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:17.260Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:43.424Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:56.550Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:49.361Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:13.989Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:00.681Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:11.951Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:26.797Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:57.461Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:17.175Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:46.960Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:16.104Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:51.367Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:54.793Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:46.530Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:53.568Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:49.377Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:07.095Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:06.083Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:15.448Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:22.748Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:26.525Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:59.637Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:04.979Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:17.102Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:18.427Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:44.843Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:34.171Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:19.668Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:04.989Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:57.729Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:56.900Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:39.915Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:53.222Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:05.421Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:40.007Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:01.873Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:44.221Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:05.699Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:09.188Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:50.842Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:14.815Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:24.569Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:11.281Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:37.014Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:31.662Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:33.824Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:26.359Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:32.405Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:39.116Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:42.917Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:27.398Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:51.818Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:16.389Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:30.716Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:07.367Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:53.429Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:11.834Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:27.189Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:05.795Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:57.431Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:12.590Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:59.282Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:46.650Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:12.740Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:42.965Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:55.949Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:24.011Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:35.641Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:49.536Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:00.094Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:33.965Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:11.580Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:56.790Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:32.443Z","0.23.0":"2021-09-13T21:35:48.021Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:20.906Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:23.661Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:30.348Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:32.227Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:06.889Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:24.474Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:03.224Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:48.316Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:27.834Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:55.837Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:48.944Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:14.909Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:54.034Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:17.128Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:02.636Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:58.655Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:53.734Z","0.25.0":"2021-09-21T02:53:07.552Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:18.275Z","0.25.1":"2021-09-21T03:12:44.312Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:16.205Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:25.516Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:55.618Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:45.282Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:16.307Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:30.017Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:39.036Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:58.303Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:57.661Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:01.343Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:24.487Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:41.576Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:22.214Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:28.589Z","0.25.2":"2021-10-11T23:18:33.484Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:36.183Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:06.688Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:44.563Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:37.717Z","0.25.3":"2021-10-21T17:55:44.738Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:35.700Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:02.913Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:55.282Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:32.462Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:59.101Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:41.970Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:07.048Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:10.540Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:02.745Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:34.995Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:21.735Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:21.612Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:51.906Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:09.539Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:48.364Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:21.674Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:05.962Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:00.179Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:01.058Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:17.395Z","0.26.0":"2022-05-03T17:30:33.675Z","0.26.1":"2022-05-09T20:31:52.231Z","0.27.0":"2022-08-12T19:12:08.945Z"},"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 radio 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/radio"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nRadio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n[Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)\n\n## Installation\n\n```sh\nnpm install @material/mwc-radio\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> 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/radio/images/standard.png\" width=\"84px\" height=\"48px\">\n\n```html\n<mwc-radio name=\"myGroup\" value=\"value1\"></mwc-radio>\n<mwc-radio name=\"myGroup\" value=\"value2\" checked></mwc-radio>\n\n<script type=\"module\">\n  import '@material/mwc-radio/mwc-radio.js';\n</script>\n```\n\n### Custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/radio/images/custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-theme-secondary: #ff2929;\n  --mdc-radio-unchecked-color: white;\n}\n</style>\n\n<mwc-radio name=\"myGroup\" checked></mwc-radio>\n<mwc-radio name=\"myGroup\"></mwc-radio>\n```\n\n### Disabled custom color\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/radio/images/disabled_custom_color.png\" height=\"40px\">\n\n```html\n<style>\nmwc-radio {\n  background-color: #363636;\n\n  --mdc-radio-disabled-color: #adadad;\n}\n</style>\n\n<mwc-radio disabled name=\"myGroup\"></mwc-radio>\n<mwc-radio disabled name=\"myGroup\" checked></mwc-radio>\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 radio.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/radio/images/formfield.png\" width=\"94px\" height=\"80px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n</style>\n\n<mwc-formfield label=\"Home\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<mwc-formfield label=\"Work\">\n  <mwc-radio name=\"location\"></mwc-radio>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-radio/mwc-radio.js';\n  import '@material/mwc-formfield/mwc-formfield.js';\n</script>\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\nName                 | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether this radio button is the currently-selected one in its group. Maps to the native [`checked`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#checked) attribute.\n`disabled`           | `boolean` | `false` | If `true`, this radio button cannot be selected or de-selected. Maps to the native [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled) attribute.\n`name`               | `string`  | `''`    | Name of the input for form submission, and identifier for the selection group. Only one radio button can be checked for a given selection group. Maps to the native [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) attribute.\n`value`              | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.\n`global`             | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the radio removes touch target that extends beyond visual boundary of the component. Set to `false` by default to meet Material [accessibility guidelines](https://material.io/design/usability/accessibility.html).\n\n### Methods\n*None*\n\n### Events\n| Name     | Detail | Description\n| ---------| ------ | -----------\n| `change` | `{}`   | Fired when the user modifies the radio `checked` state from an input device interaction on this radio. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` property is set from JavaScript, nor is it fired when another radio in the same group becomes `checked`.\n\n### CSS Custom Properties\n\n| Name                    | Default                                | Description\n| ----------------------- | -------------------------------------- |------------\n| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.\n| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`              | Color of the radio button.\n\n## Additional references\n\n- [MDC Web: Radio Buttons](https://material.io/develop/web/components/input-controls/radio-buttons/)\n","readmeFilename":"README.md","keywords":["material design","web components","radio"]}